Change background color of a checkbox when its active

Question

I want to change the background color to green if the custom styled checkbox is active (checked). I have tried this

Html

    <div class="checkboxOne">
        <input type="checkbox" value="1" id="checkboxOneInput" name="" />
        <label for="checkboxOneInput"></label>
    </div>

Css

input[type=checkbox] {
    visibility: hidden;
}

.checkboxOne {
    width: 40px;
    height: 10px;
    background: #9c9d9d;
    margin: 20px 80px;
    position: relative;
    border-radius: 3px;
box-shadow: inset 0px 0px 2px #565656;
}

.checkboxOne label {
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
    cursor: pointer;
    position: absolute;
    top: -4px;
    left: -3px;
border:1px solid #9b9b9b;
    background: #fff;
}

.checkboxOne input[type=checkbox]:checked + input {
    background: #21ae56;
}

.checkboxOne input[type=checkbox]:checked ~ div {
    background: #21ae56;
}

.checkboxOne input[type=checkbox]:checked + label {
    left: 27px;
}

However, it doesnt change the background. What is the correct way to do it ?

Codepen: http://codepen.io/anon/pen/WGvPpk

i disagree that this is a duplicate. it's a specific question while the other is a huge collection of all of the possible ways that you can or can't style a checkbox since 2010. — worc, Sep 08 '16 at 18:52

score 5 · Answer 1 · edited Sep 08 '16 at 18:24

Checkbox doesn't have a background-color attribute

You can use fake elements to wrap the checkbox and change the colors of those:

input[type=checkbox] {
  width: 30px;
  height: 30px;
  font-size: 27px;
}
input[type=checkbox]:after {
  content: " ";
  background-color: purple;
  display: inline-block;
  visibility: visible;
}
input[type=checkbox]:checked:after {
  content: "\2714";
  /* this is a checkmark symbol */
}

<label>Checkbox label
  <input type="checkbox">
</label>

Change background color of a checkbox when its active

1 Answers1