Changing checkbox layout without using label

Question

Is it possible to change the layout of a checkbox without adding the label tag in CSS?

Things like this do not have any effect:

input[type=checkbox][disabled] {
  background-color: green;
  border: 10px solid red;
}

The only thing I found so far is how to change the opacity.

Possible duplicate of [How to style checkbox using CSS?](http://stackoverflow.com/questions/4148499/how-to-style-checkbox-using-css) — Tim Sheehan, Nov 23 '15 at 13:45
Well, my question is rather focussing on what options I have changing the layout WITHOUT adding a label tag. So no duplicate please. — Lokomotywa, Nov 23 '15 at 13:47
That's the point, there are no options to style a checkbox in CSS alone without using some sort of pseudo selection hack with labels or other elements. — Tim Sheehan, Nov 23 '15 at 13:48
There is no cross platform, BUT you can do this just for Google Chrome, — Mosh Feu, Nov 23 '15 at 13:52
I'm voting to close this question as off-topic because the conditions of the question cannot be satisfied within standards. — Mogsdad, Nov 23 '15 at 21:34

score 2 · Accepted Answer · edited May 23 '17 at 11:51

2

I'm not sure if this will be much use to you, but it does allow you to "style up" a checkbox without the need for a label. I've remove the disabled flag so you can swap between the different styles. Shouldn't be difficult to add it back in if this will work for you.

Fiddle is here.

input[type=checkbox]:checked:before {
    background-color: green;
    border: 10px solid red;
}
input[type=checkbox]:before {
    content:'';
    display:block;
    height:100%;
    width:100%;
    border: 10px solid green;
    background-color: red;
}

The above only works on Chrome, however, it seems like Chrome is in the wrong where the specification is concerned.

A fuller answer here: CSS content generation before or after 'input' elements

edited May 23 '17 at 11:51

Community

1
1

answered Nov 23 '15 at 14:55

Darren Gourley

1,798
11
11

Will update the answer :) I have to admit though, I've never used this approach myself (I normally use a label), so was surprised when I saw this working! – Darren Gourley Nov 23 '15 at 15:08
1

Only-chrome solutions are usually cruft (or crap). Chrome doesn't fit in standards, as old IE behaviour. It's better to avoid the bad practices that google sometimes tell us that we can do it, because they search by a full quota of users using chrome. I don't use chrome, it's by proud of using a full-standard-non-bugs browser like firefox (and don't put my machine to 99% cpu load and 3 GB of RAM occupied). – Marcos Pérez Gude Nov 23 '15 at 15:11

score 1 · Answer 2 · edited May 23 '17 at 12:30

As of today there is no solution, if we assume a cross browser functional styling, to style the <input type="checkbox" > alone, other than a few properties like opacity, width, height, outline (and maybe a few more).

Using a label (or other content elements) is what you need to do that and here is a good (which this question is likely a duplicate of) post with lots of options: How to style checkbox using CSS?

Note: If you know more properties, feel free to update this answer.

Changing checkbox layout without using label

2 Answers2