Checkboxes in web pages – how to make them bigger?

Question

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" />

Leave a Comment Cancel reply