CSS Checkbox styling - size color change

Question

I am trying to do simple checkbox styling. The color change is not working.

How to change the color and border?

    input[type=checkbox]{
      height: 25px;
      width: 25px;
      background-color: #eee;
      }
    
    input[type=checkbox]:checked {
        background-color: #3ee738;
      }

    <p>
    <input type="checkbox" id="showall" name="showall" value=0>&nbsp;
    <label for="showall">Show All</label>
    </p>
    <p>
    <input type="checkbox" id="showfl" name="showfl" value=0>&nbsp;
    <label for="showfl">Filtered</label>
    </p>
    <p>

Masudul Hasan Shawon · Accepted Answer · 2020-12-31 05:39:28Z

    input[type=checkbox] + label {
  display: block;
  margin: 0.2em;
  cursor: pointer;
  padding: 0.2em;
}

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

input[type=checkbox] + label:before {
  content: "\2714";
  border: 0.1em solid MediumSeaGreen;
  border-radius: 0.2em;
  display: inline-block;
  width: 1em;
  height: 1em;
  padding-left: 0.2em;
  padding-bottom: 0.3em;
  margin-right: 0.2em;
  vertical-align: bottom;
  color: transparent;
  transition: .2s;
}

input[type=checkbox] + label:active:before {
  transform: scale(0);
}

input[type=checkbox]:checked + label:before {
  background-color: MediumSeaGreen;
  border-color: MediumSeaGreen;
  color: #fff;
}

input[type=checkbox]:disabled + label:before {
  transform: scale(1);
  border-color: #aaa;
}

input[type=checkbox]:checked:disabled + label:before {
  transform: scale(1);
  background-color: #bfb;
  border-color: #bfb;
}

    <p>
    <input type="checkbox" id="showall" name="showall" value=0>&nbsp;
    <label for="showall">Show All</label>
    </p>
    <p>
    <input type="checkbox" id="showfl" name="showfl" value=0>&nbsp;
    <label for="showfl">Filtered</label>
    </p>
    <p>

Riley · Accepted Answer · 2020-12-31 05:41:39Z

Checkboxes are not currently able to be styled with CSS, as they are typically based on the user's operating system's default styling. The way to get around this with CSS is to style another element, in your case, the <label> tag to serve as the visual indicator of the checkbox, and then some pseudo selector and pseudo element CSS to trigger the change when the input is checked.

Because the input and the label are connected via the id and for attributes, shrinking the input hide it works effectively and still maintains accessibility.

li {
  position:relative;
}
input {
  height:1px;
  width:1px;
  position:absolute;
  opacity:0;
  top:0;
  left:0;
}

label {
  cursor:pointer;
  padding-left:25px;
}

label::before {
  content:"";
  position:absolute;
  left:0;
  top:0;
  height:15px;
  width:15px;
  border:1px solid blue;
}

label::after {
  content:"";
  color:white;
  position:absolute;
  left:2px;
  top:0;
}

input[type=checkbox]:checked + label::before {
    background:blue;
}

input[type=checkbox]:checked + label::after {
    content:"✓";
}

<ul>
  <li><input id="cat" type="checkbox"> <label for="cat">Cat</label></li>
  <li><input id="dog" type="checkbox"> <label for="dog">Dog</label></li>
</ul>

gavgrif · Accepted Answer · 2020-12-31 05:55:16Z

What you need to do is to hide the actual html element of the checkbox and create a new one that can be styled easily.

So the logic of this approach is to have a span for the box and a span for the icon and style each accordingly - showing the icon when the input is checked using the :checked pseudoselector.

Note that the label wraps around the whole group so that clicking anywhere on the label will toggle the checkbox - doing it this way removeds the need for the for attribute.

I also added a checked function that will toggle the other checkbox whebn the showAll check is checked.

Edit - note that you can use other methods of getting the icon in there- you may prefer the font awesome fa-check icon for example.

const showAll = document.querySelector("#showAll");

showAll.addEventListener('click', () => toggleAll());

function toggleAll() {
 document.querySelector("#showfl").checked = showAll.checked;
}

.checkbox-wrapper {
margin-bottom: 16px;
}

input[type=checkbox]{
 display: none
}
    

.checkbox-box{
    display: inline-block;
    height: 25px;
    width: 25px;
    background-color: #eee;
    text-align: center
 }
 
 .checkbox-icon {
  visibility: hidden
 }
     
     
input[type=checkbox]:checked + .checkbox-box{
 background-color: #3ee738;
}

input[type=checkbox]:checked + .checkbox-box .checkbox-icon {
 visibility: visible
}

<div class="checkbox-wrapper">
  <label>
    <input type="checkbox" id="showAll" name="showAll" />
   <span class="checkbox-box">
    <span class="checkbox-icon">&check;</span> 
   </span> Show All
  </label>
</div>
<div class="checkbox-wrapper">
  <label>
    <input type="checkbox" id="showfl" name="showfl" />
   <span class="checkbox-box">
    <span class="checkbox-icon">&check;</span> 
   </span> Filtered
  </label>
</div>

Collectives™ on Stack Overflow

CSS Checkbox styling - size color change

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related