How set "text-decoration: line-through" style for a label that has inside an element?

Question

I have -

<label for="1640801145364"><input type="checkbox" value="foo" id="1640801145364" name="foo">foo</label>

I need to set "text-decoration: line-through" style (in file.css) for a label that has inside an element. I tried write next in file.css, but it doesn't helps me.

label>input[type=checkbox]:checked {
    text-decoration: line-through;
}

Laaouatni Anas · Answer 1 · 2021-12-29T19:15:09.157

I see your CSS, you thought that the foo text will be inside the input, but not really that's because: <input> don't need a closing tag so they can't inner foo text

so first a foo text in a span so with CSS we can easily select it

then I used a CSS COMBINATOR ~ https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator

you can write it with ALT126

so if the input is checked ...

...the ~ make us not styling the input itself, but the styling what we want (in this case span)

EDIT: make sure that everything you want to style is after the input because the ~ can't select the previous elements.

here the code

input[type=checkbox]:checked~span {
  text-decoration: line-through;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <label for="1640801145364">
        <input type="checkbox" value="foo" id="1640801145364" name="foo"> 
        <span>foo</span>
    </label>
</body>

</html>

Thanks you so much for your answer, Laaouatni Anas! – G T Dec 29 '21 at 20:59 — G T, Dec 29 '21 at 20:59

score 0 · Accepted Answer · answered Dec 29 '21 at 19:31

CSS cannot 'go back upwards' in the way you would like to do here, so the checked status of the input cannot affect the overall label.

There are a few ways round this. You could just swap the input out of the label to be before it, but of course that would alter the look. Instead this snippet puts the contents of the label in a span element and then the state of the input can influence the styling of that as the new element is a following sibling.

input:checked+* {
  text-decoration: line-through;
}

<label for="1640801145364">
<input type="checkbox" value="foo" id="1640801145364" name="foo">
  <span>foo</span>
</label>

How set "text-decoration: line-through" style for a label that has inside an element?

2 Answers2

here the code