How to size input[type=checkbox] elements using css

Question

We have been sizing checkboxes using transform:scale(1.5) for sometime. Recently something has changed in the browsers, because it is no longer working. For example on Chrome Version 42.0.2311.135 (64-bit) updated today (4/30/15), the following code doesn't work. The size jumps to about 3X. Changing the scale number (for example to 1.1) has no effect.

<html>
<head></head>
<body>
    <input type="checkbox" style="-webkit-transform:scale(1.5)">
</body>
</html>

So, does anyone know how to size a checkbox using current browsers? I've tried all the solutions I have read about (font-size:x-large, setting height, width, font-size, ...)

Follow this link: stackoverflow.com/questions/8242240/…

Filipe Paulo
– Filipe Paulo

2015-04-30 16:02:34 +00:00
Commented Apr 30, 2015 at 16:02 — Filipe Paulo
– Filipe Paulo, Commented Apr 30, 2015 at 16:02

liamness · Accepted Answer · 2015-04-30 16:06:43Z

2

It's notoriously difficult to style checkbox elements. I tend to hide the checkbox itself, introducing a sibling element to show the state instead. Simplifed / redacted code from something I worked on:

Markup

<label class="checkbox">
    <input type="checkbox">
    <span class="checkbox__icon"></span>
</label>

SASS

.checkbox {
    .checkbox__icon {
        /* styling for checkbox goes here */
    }
    input[type=checkbox] {
        display: none;
        &:checked ~ .checkbox__icon {
            /* styling for checked checkbox goes here */
        }
        &:disabled ~ .checkbox__icon {
            /* styling for disabled checkbox goes here */
        }
    }
}

The span can contain a font-icon, an svg background image, whatever you like. But regardless of the approach you take, the upshot is that you can control how it looks across browsers.

answered Apr 30, 2015 at 16:06

liamness

7423 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

MJ Harris Over a year ago

Cool. I don't know SASS. Is &:checked ~ .checkbox__icon standard css syntax or something specific to SASS? I haven't seen & in standard css before.

liamness Over a year ago

& is specific to sass, it extends the parent selector, so that's basically targeting input[type=checkbox]:checked. ~ is standard CSS, it's a sibling selector.

Anthony Sallis · Accepted Answer · 2017-11-23 15:52:57Z

0

Label text may need re-aligning with this increase in size:

(.large-check) input[type=checkbox] {
    height: 20px ;
    width: 20px  ;
}

answered Nov 23, 2017 at 15:52

Anthony Sallis

12 bronze badges

Collectives™ on Stack Overflow

How to size input[type=checkbox] elements using css

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related