CODEWITHSUNDEEP
csssass
Malsha Madushani Kalahewaththa
Malsha Madushani Kalahewaththa

Reputation: 196

How to change the checked colour of the checkbox?

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;
 
  }

Upvotes: 0

Views: 1175

Answers (3)

Dyan Bent
Dyan Bent

Reputation: 53

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>

Upvotes: 1

allenretz
allenretz

Reputation: 232

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>

Upvotes: 1

Ryan Tafakori
Ryan Tafakori

Reputation: 144

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.

Upvotes: 2

Related Questions