Styling Checkboxes CSS Tricks Code Example


Example: custom checkbox in css


/* Custom CSS Checkbox */
<input type="checkbox">
<label>
<span class="custom-checkbox"></span> my checkbox
</label>

[type="checkbox"]
{
opacity: 0;
position: absolute;
}

.custom-checkbox {
min-width: 0.75em;
min-height: 0.75em;
margin-right: 0.75em;
border: 2px solid currentColor;
border-radius: 50%;
display: inline-block;
}

[type="checkbox"]:checked+label .custom-checkbox {
border-color: blue;
background: blue;
box-shadow: inset 0 0 0 2px white;
}

Comments

Popular posts from this blog

Converting A String To Int In Groovy

"Cannot Create Cache Directory /home//.composer/cache/repo/https---packagist.org/, Or Directory Is Not Writable. Proceeding Without Cache"

Android How Can I Convert A String To A Editable