Styling a checkbox with css only

Question

Styling a checkbox with css only. Checkbox definition uses shorthand definition and not span and label to define the text.

input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    cursor:pointer;
}

Hello world!<input name="status" id="status" type="checkbox" />

I would like to see a blue border when the user hovers over the checkbox. What is diffirent for my question is that it uses short hand notation. There is no explicit label, or span element that you can manipulate to get a certain effect.

Possible duplicate of http://stackoverflow.com/questions/4148499/how-to-style-checkbox-using-css?rq=1 — Alexis, Dec 08 '15 at 10:22
@Alexis, The question is not duplicate to the one you link, because in my case I use the shorthand notation for an input element. — Harriet, Dec 08 '15 at 10:23
Well its different - if you cannot help please don't answer. — Harriet, Dec 08 '15 at 10:29
I think you will need an element wrapping `Hello world!`, as `input` does not accept `:before` or `:after` — sodawillow, Dec 08 '15 at 10:56

Gabriel machts · Accepted Answer · 2015-12-08T15:24:02.643

0

When it comes to styling the checkbox itself, you can use the following CSS (for Firefox and Safari/Chrome) to unset standard input elements appearance and then design them yourself (compare http://www.w3schools.com/cssref/css3_pr_appearance.asp):

input[type="checkbox"] {    
-moz-appearance:none; /* Firefox */
-webkit-appearance:none; /* Safari and Chrome */
... [your definitions]
}

Styling of the checkbox AND the text next to it, will not work without a wrapping element, as @sodawillow has pointed out. You could use jQuery to generate a wrapping element around each checkbox and its preceding text:

$('input[type="checkbox"]').each(function{
 $(this, this.prev()).wrapAll('<li class="checkbox_wrapper"></li>');
});
$('li.checkbox_wrapper').wrapAll('<ul></ul>');

Then you can use the checkbox_wrapper class to design the whole thing.

edited Dec 08 '15 at 15:24

answered Dec 08 '15 at 11:32

Gabriel machts

187
11

At best the wrapper can be an unordered list. – Harriet Dec 08 '15 at 12:16
Thanks @Gabriel, you gave me a good idea about having the jQuery handle the wrapper. – Harriet Dec 08 '15 at 12:42
Of course, the wrapper can be anything. I'm changing the example so you get an unordered list. You would have to add a line for the
– Gabriel machts Dec 08 '15 at 15:21

Styling a checkbox with css only

1 Answers1