CSS not working for checkbox list

Question

input[type="checkbox"]:checked + label:after{
                border: 2px solid red;
                background-color: red;
        }

<div class="input-field col s12">
        <input id="cb1" name="testCheck" type="checkbox" required>
        <label for="cb1">Option 1</label>
</div>

<div class="input-field col s12">
        <input id="cb2" name="testCheck" type="checkbox" required>
        <label for="cb2">Option 2</label>
</div>

<div class="input-field col s12">
    <input id="cb3" name="testCheck" type="checkbox" required>
    <label for="cb3">Option 3</label>
</div>

I have a list of checkboxes

<div class="input-field col s12">
        <input id="cb1" name="testCheck" type="checkbox" required>
        <label for="cb1">Option 1</label>
</div>

<div class="input-field col s12">
        <input id="cb2" name="testCheck" type="checkbox" required>
        <label for="cb2">Option 2</label>
</div>

<div class="input-field col s12">
    <input id="cb3" name="testCheck" type="checkbox" required>
    <label for="cb3">Option 3</label>
</div>

I use the following CSS to change the color of the check boxes when checked:

input[type="checkbox"]:checked + label:after{
                border: 2px solid red;
                background-color: red;
        }

that does not work. Interestingly, the same CSS:

input[type="radio"]:checked + label:after{
                border: 2px solid red;
                background-color: red;
        }

works for radiobutton list.

I want something like that:

https://d2d3qesrx8xj6s.cloudfront.net/img/screenshots/68b1d126c5b51eb4267aed2e5fd751db1c72aa1b.jpeg

Are you sure that CSS works for radio inputs? Because you can't actually use sibling selectors and pseudo-elements together. — FluffyKitten, Oct 16 '17 at 16:38
Possible duplicate of [Can I target a :before or :after pseudo-element with a sibling combinator?](https://stackoverflow.com/questions/7735267/can-i-target-a-before-or-after-pseudo-element-with-a-sibling-combinator) — FluffyKitten, Oct 16 '17 at 16:38
What are you hoping to accomplish by using `:after` with the `label`? — j08691, Oct 16 '17 at 16:40

Brett DeWoody · Answer 1 · 2017-10-16T18:12:06.400

0

If that's the entirety of your code it won't work as is. You'll need to give the :after psuedo element some additional properties. Namely content: "";

Update - In a comment you mentioned you just want to add a border to the checkbox. To do that use outline. Like this:

input[type="checkbox"]:checked {
  outline: 3px solid red;
}

<div class="input-field col s12">
  <input id="cb1" name="testCheck" type="checkbox" required>
  <label for="cb1">Option 1</label>
</div>

<div class="input-field col s12">
  <input id="cb2" name="testCheck" type="checkbox" required>
  <label for="cb2">Option 2</label>
</div>

<div class="input-field col s12">
  <input id="cb3" name="testCheck" type="checkbox" required>
  <label for="cb3">Option 3</label>
</div>

edited Oct 16 '17 at 18:12

answered Oct 16 '17 at 16:41

Brett DeWoody

59,771
29
135
184

Unfortunately that did not make any difference, still the same – Coding Duchess Oct 16 '17 at 18:05
What browser/OS combo are you using? – Brett DeWoody Oct 16 '17 at 18:06
I am using Chrome on Windows 7. Also I am using material design framework – Coding Duchess Oct 16 '17 at 18:29
I added a sample image in my question – Coding Duchess Oct 16 '17 at 19:03

FluffyKitten · Answer 2 · 2017-10-16T16:47:31.800

I don't see any purpose in the code you posted for the :after - there is nothing after your label to highlight, so I'm not sure why you are trying to style it.

If you remove it from your rule, the CSS highlights the label in red. I think this is what you are trying to do?

input[type="checkbox"]:checked + label{
     border: 2px solid red;
     background-color: red;
}

Working example:

input[type="checkbox"]:checked + label{
                border: 2px solid red;
                background-color: red;
        }

<div class="input-field col s12">
        <input id="cb1" name="testCheck" type="checkbox" required>
        <label for="cb1">Option 1</label>
</div>

<div class="input-field col s12">
        <input id="cb2" name="testCheck" type="checkbox" required>
        <label for="cb2">Option 2</label>
</div>

<div class="input-field col s12">
    <input id="cb3" name="testCheck" type="checkbox" required>
    <label for="cb3">Option 3</label>
</div>

The thing is I just want to highlight the checkbox itself, not the label — Coding Duchess, Oct 16 '17 at 18:03

score 0 · Accepted Answer · answered Oct 16 '17 at 18:28

0

I found a solution that worked for me. I added a class to each checkbox - class="filled-in" and changed my css:

input[type="checkbox"].filled-in:checked + label:after{
    border: 2px solid red;
    background-color: red;
}

answered Oct 16 '17 at 18:28

Coding Duchess

6,445
20
113
209

CSS not working for checkbox list

3 Answers3