CSS/HTML: How do I change the color of the check mark within the checkbox input? [duplicate]

Here’s a pure CSS solution that shouldn’t break screen readers or default user agent actions. Additionally, this is supported in the latest versions of the big 4 browsers (and a few others if you add some additional hacks, but I’ll leave that to you to figure out; probably won’t get more than IE8+ support since it uses pseudo elements).

The idea is to hide the actual form element (because browsers do a hard replace with internal styles and don’t expose all style-ability to css yet) and replace it with one we like. One side effect is that you will want to track change events rather than click events in your JS if you need it (but you were doing that anyway right?).

Because the label is tied to the form element clicking it works like one would expect, so the new, awesome, checkbox (::before) abuses attribute selectors ([checked]) on the original to check if it is checked. When it is checked it will display our awesomer checkmark (::after).

The checkmark (::after) abuses border width for thickness and height/width for making a checkmark like item. Finally, we transform the box 45deg to match the angle up properly.

To change the color of the checkmark, change the border color on the ::after style. Additionally, if you wanted it to always match your text color remove the border color on it altogether. To change the radio, change the radial gradient start color (the one that isn’t white).

Also awesome is that its tied to font size, so if your text is bigger, it should shim right in (though rounding errors can happen when using relative font sizes, so be careful)

I’ve included basic styles for both check-able types (checkbox and radio).

HTML:

<fieldset>
    <legend>Checkbox example</legend>
    <input id="checkbox" type="checkbox"/>
    <label for="checkbox">Some awesome checkbox label</label>
</fieldset>
<fieldset>
    <legend>Radio example</legend>
    <div>
        <input id="radio1" type="radio" name="radio"/>
        <label for="radio1">Some awesome radio option #1</label>
    <div>
    </div>
        <input id="radio2" type="radio" name="radio"/>
        <label for="radio2">Some awesome radio option #2</label>
    </div>
</fieldset>

CSS:

label, input[type="radio"], input[type="checkbox"] {
   line-height: 2.1ex;
}

input[type="radio"],
input[type="checkbox"] {
    position: absolute;
    left: -999em;
}

input[type="radio"] + label,
input[type="checkbox"] + label {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

input[type="radio"] + label::before,
input[type="checkbox"] + label::before {
   content: "";
   display: inline-block;
   vertical-align: -25%;
   height: 2ex;
   width: 2ex;
   background-color: white;
   border: 1px solid rgb(166, 166, 166);
   border-radius: 4px;
   box-shadow: inset 0 2px 5px rgba(0,0,0,0.25);
   margin-right: 0.5em;
}

input[type="radio"]:checked + label::before {
   background: radial-gradient(circle at center, #1062a4 .6ex, white .7ex);
}

input[type="radio"] + label::before {
   border-radius: 50%;
}

input[type="checkbox"]:checked + label::after {
   content: '';
   position: absolute;
   width: 1.2ex;
   height: 0.4ex;
   background: rgba(0, 0, 0, 0);
   top: 0.9ex;
   left: 0.4ex;
   border: 3px solid #1062a4;
   border-top: none;
   border-right: none;
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   transform: rotate(-45deg);
}

Side note: necropost because this was the first question that popped up when I was trying to remember how I pulled this off in the past. 😉