Change the color of the checkbox's check mark in css

Question

How can I change the color of the check mark using css?

<label style="color: #fff;">
  <input type="checkbox" name="remember" value="1" class="remember">
  <span></span>
</label>

Answer 1

I think this is what you want (CSS only):

HTML:

<input type="checkbox" name="genres" value="adventure" id="adventure_id">
<label for="adventure_id" style="font-family: 'SExtralight'; font-size:14px;">Adventure</label>

CSS:

input[type="checkbox"]:checked + label::after {
    content: '';
    position: absolute;
    width: 1.2ex;
    height: 0.4ex;
    background: rgba(0, 0, 0, 0);
    top: 0.5ex;
    left: 0.6ex;
    border: 3px solid red;
    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);
}

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

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

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

input[type="checkbox"] + label::before {
    content: "";
    display: inline-block;
    vertical-align: -25%;
    height: 3ex;
    width: 3ex;
    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;
}