Styling checkbox using CSS

Question

I am trying to style a custom checkbox on a form; my HTML looks something like this:

<form id="contact">
  <input type="checkbox" id="option1" />
  <label for="option1">Option</label>
</form>

My CSS looks something like this:

form input[type="checkbox"] {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0.2;
}
form label {
  padding-left: 20px;
  position: relative;
}
form label:before {
  content: "";
  width: 20px;
  height: 20px;
  position: absolute;
  left: -10px;
  border: 1px solid #000;
}

I wanted to add a background color when the checkbox is ticked so I added this rule:

input[type="checkbox"]:checked + label:before {
  background-color: #ccc;
}

Which works like I wanted to, but I need to be specific only for the rule to work on a contact form, so I changed it to:

#contact input[type="checkbox"]:checked + #contact label:before {
  background-color: #ccc;
}

This time it does not work. The background does not change when the checkbox is ticked.

My question is what is wrong with the CSS? What am I missing?

Possible duplicate of How to style a checkbox using CSS

miken32
– miken32

2019-08-13 20:20:51 +00:00
Commented Aug 13, 2019 at 20:20 — miken32
– miken32, Commented Aug 13, 2019 at 20:20

Josh Crozier · Accepted Answer · 2016-01-20 01:08:28Z

1

You were very close. The selector should be:

#contact input[type="checkbox"]:checked + label:before {
  background-color: #ccc;
}

The reason it wasn't working was because #contact isn't an adjacent sibling with the input[type="checkbox"] element. You need to omit the second #contact id selector.

In other words, the selector:

input[type="checkbox"]:checked + #contact label {}

Would attempt to select the following label element:

<input type="checkbox" id="option1" />
<div id="#contact">
   <label for="option1">Option</label>
</div>

Since the input checkbox element doesn't have an adjacent #contact element, nothing was being selected.

answered Jan 20, 2016 at 1:08

Josh Crozier

242k56 gold badges401 silver badges316 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Firdaus Riyanto Over a year ago

Thanks for your quick reply, mate! It works perfectly.

Ram kumar · Accepted Answer · 2016-01-20 03:00:14Z

0

form input[type="checkbox"] {
    position: absolute;
    left: 0;
    top: 0; opacity: 0; }

form label {
    padding-left: 30px;
    position: relative; }

form  label:before {
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    left: 0;
    top: 0;
    border: 1px solid #000; }
    
    #contact input[type="checkbox"]:checked + label:before { background-color: #ccc; }

<form id="contact">
       <input type="checkbox" id="option1" />
       <label for="option1">Option</label>
   </form>

Please just update this code #contact input[type="checkbox"]:checked + label:before { background-color: #ccc; }

answered Jan 20, 2016 at 3:00

Ram kumar

3,1586 gold badges36 silver badges52 bronze badges

2 Comments

Josh Crozier Over a year ago

How is this different from what I posted 3 hours ago?

Ram kumar Over a year ago

you did wrong here prntscr.com/9sdt1i you already specified right selector already so remove beore + label selector

Collectives™ on Stack Overflow

Styling checkbox using CSS

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related