mercredi 23 septembre 2015

Styling a checkbox without touching the checkmark

I'd just like to change the background color and remove the border so that I have a white square.

There's a working hack (except on IE) where you can hide the input and put a span element in its place that works just as well, except it hides the checkmark (the :checked status) and it requires you to use your own image.

From another StackOverflow answer:

.myCheckbox input {
    display: none;
}

.myCheckbox span {
    width: 20px;
    height: 20px;
    display: block;
    background: url("link_to_image");
    }

.myCheckbox input:checked + span {
    background: url("link_to_another_image");
}

<label for="test">Label for my styled "checkbox"</label>
<label class="myCheckbox">
    <input type="checkbox" name="test"/>
    <span></span>
</label>

I'd like to use the default checkmark.




Aucun commentaire:

Enregistrer un commentaire