Member Avatar for jonsan32

With the checklist script below, how do I make the letters dim to gray while making the strikethrough a bright red? I know it has something to do with placing one class that holds the text within another that holds the strikethrough and the text, but I just can't get it.

And I've heard HTML5 doesn't support this, and only supports <del>. Is there a way to apply the script below to accomodate that as well? Any help on any of this would be awesome. Thanks all!

<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
<!--
function toggle(box,theId) {
    if(document.getElementById) {
        var cell = document.getElementById(theId);
        if(box.checked) {
            cell.className = "on";
        }
        else {
            cell.className = "off";
        }
    }
}
// -->
</script>
<style type="text/css">
<!--
.listcheck{
font-size:20px;
font-weight:bold;
padding-left:5px;
}
.off {
color: #000;
}
.on {
color: #bbb;
text-decoration: line-through;
}
-->
</style>
</head>
<body>
<table border="0" cellpadding="5" cellspacing="0">
<tr><td class="off" id="cell1">
<input type="checkbox" onclick="toggle(this,'cell1')"><span class="listcheck">Yada Yada Yada</span>
</td></tr>
<tr><td class="off" id="cell2">
<input type="checkbox" onclick="toggle(this,'cell2')"><span class="listcheck">Yada Yada Yada</span>
</td></tr>
</table>
</body>
</html>
  • 2 Contributors
  • 7 Replies
  • 478 Views
  • 14 Hours Discussion Span
  • Latest Post Latest Post by jonsan32

Dani AI

Generated

Short answer: toggle a class on the text node (that part is what did) and use the modern CSS property text-decoration-color for a colored strike plus a dimmed text color. For older browsers keep a robust fallback that draws the line with a pseudo-element. The pattern below keeps your checkbox logic (just target the inner label/span), is semantic if you prefer <del>, and avoids inline style swapping.

Example (modern; most browsers now support this):

<label>
  <input type="checkbox" id="t1">
  <span class="task">Yada Yada Yada</span>
</label>

<style>
.task { color:#111; font-weight:700; }
.task.done {
  color:#bbb; /* dim the text */
  text-decoration-line: line-through;
  text-decoration-color: #e00;         /* red strike */
  -webkit-text-decoration-color: #e00; /* older WebKit */
  text-decoration-thickness: 2px;
}
</style>

<script>
document.querySelectorAll('input[type="checkbox"]').forEach(cb=>{
  cb.addEventListener('change', e=>{
    const span = e.target.closest('label').querySelector('.task');
    span.classList.toggle('done', e.target.checked);
  });
});
</script>

text-decoration-color is the direct, simplest solution for separate strike color. For current compatibility and behavior notes see the MDN docs and the compatibility table. (developer.mozilla.org)

Fallback when you need pixel-perfect control (or must support older browsers): draw the line with a positioned pseudo-element so the strike color/position/thickness are independent of text color.

.task-pseudo { position:relative; color:#222; }
.task-pseudo.done { color:#bbb; }
.task-pseudo.done::after{
  content:"";
  position:absolute; left:0; right:0;
  top:50%; height:2px; background:#e00;
  transform:translateY(-50%);
  pointer-events:none;
}

This approach is widely used and reliable; see MDN on generated content and notes about accessibility/stacking. ()

Semantics: if the line really means “deleted” use <del> (it’s the semantic element for deletions and can be styled the same way). If it’s just a UI checklist state, a styled <span> or <label> is fine. For <del> details and accessibility considerations see MDN. (developer.mozilla.org)

Notes: ’s class-toggling approach was the right direction — keep class toggles (or jQuery’s addClass/removeClass) and style the inner element. If supporting very old browsers is required, prefer the pseudo-element fallback; otherwise prefer the cleaner text-decoration-color solution.

Recommended Answers

All 7 Replies

Member Avatar for jonsan32

Yes, I saw that exact page. Only problem is it looks like I would need it in the css since I'm trying to replace one css with another. I'm not sure if you can do that with a style tag hooked noto the actual element, can you?

Thanks for replying either way.

Member Avatar for jonsan32

"Yup" might be right. That looks like the answer I need is somewhere in there. Combining classes seems to be the route. Good find. I was on the uijquery page looking through demos, didn't see that site.

If you can give me any hints on how to apply it, throw em my way. Other than that, thanks a ton!

Member Avatar for pixelsoul

Awesome. I'm about to go out to a movie, but if you still need the help when I get back I'll take a look.

Member Avatar for jonsan32

That's more than perfect. Thank you so much. I hope that movie was great. I really do appreciate your time and effort... as effortless as all this appears to be for you :-)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.