☰

Checkboxes in web pages – how to make them bigger? Ask Question

tag-icon • tag-icon html css checkbox
Checkboxes in web pages – how to make them bigger? Ask Question

The standard checkboxes rendered in most browsers are quite small and don’t increase in size even when a larger font is used. What is the best, browser-independent way to display larger checkboxes?

ベストアンサー1

In case this can help anyone, here's simple CSS as a jumping off point. Turns it into a basic rounded square big enough for thumbs with a toggled background color.

input[type='checkbox'] {
    -webkit-appearance:none;
    width:30px;
    height:30px;
    background:white;
    border-radius:5px;
    border:2px solid #555;
}
input[type='checkbox']:checked {
    background: #abd;
}
<input type="checkbox" />

おすすめ記事