How to change the checked colour of the checkbox?

Question

I want to change the color of my checked checkbox to green.And the size should aloso change.But in my code sizes are changing but the color doesn't. I tried using :checked:after also

input[type='checkbox']{
    width: 16px !important;
    height: 16px !important;
    border-radius: 2px;
    border: 1px solid #7A7A9D;
    box-sizing: border-box;
  }
  
  input[type='checkbox']:checked{
    width: 100px !important;
    height: 100px !important;
    margin: 5px;
    color: red;
 
  }

Answer 1

Checkboxes are not able to be styled. You would need a third party js plugin there are many available.

If you want to do this yourself it basically involves hiding the checkbox creating an element and styling that as you want then binding its click event to two functions one to change its look and another to activate the click event of the checkbox.

The same problem will arise when trying to style that little down arrow on a drop-down select element.

Answer 2

Checkboxes are generally not considered stylable, but there are a lot of good ways to cheat. W3C's Custom Check Boxes and Radio Buttons is a good place to start. It also looks like a related SO Question has a number of useful links.

I would use the more advanced CSS "+" selector

Also, using !important in CSS is usually asking for trouble. there are a few rare instances where it is helpful, but overall it usually just causes trouble.

To directly answer your question:

input[type='checkbox'] {
  display: none;
}

input[type='checkbox']+span::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 2px;
  border: 1px solid #7A7A9D;
  box-sizing: border-box;
}

input[type='checkbox']:checked+span::before {
  width: 100px;
  height: 100px;
  margin: 5px;
  background: green;
}

<label>
  <input type="checkbox">
  <span>Eggs</span>
</label>

<label>
  <input type="checkbox">
  <span>Cheese</span>
</label>

<label class="custom-checkbox">
  <input type="checkbox">
  <span >Bacon</span>
</label>

Answer 3

You can use this trick, i hope it's can solve your problem

span {
  color: grey; /* text colour before klick */
}

label > input[type="checkbox"] {
  display: none;
}

label > input[type="checkbox"] + *::before {
  content: "";
  display: inline-block;
  vertical-align: bottom;
  width: 1rem;
  height: 1rem;
  border-radius: 10%;
  border-style: solid;
  border-width: 0.1rem;
  border-color: gray;
}

label > input[type="checkbox"]:checked + *::before {
  content: "✓"; /* you can cange check logo here */
  transform: scale(0.7); /* this is for check size */
  color: green; /* check colour */
  text-align: center;
  background: white; /* check background colour */
  border-color: white; /* check border colour */
}
label > input[type="checkbox"]:checked + * {
  color: green;
}

<label>
  <input type="checkbox" name="key" value="value" />
  <span>I am a checkbox</span>
</label>