styling checkbox without images and still having labels?

0
votes

I'm trying to style my checkboxes, without using images. I'm not above using javascript and events, but I view that as a last resort. And yes, I'm aware that a lot of people are asking about checkbox styling in here, but I didn't find anyone who had asked this particular question, or answers which seemed to solve the problem.

I've had a look at

http://www.inserthtml.com/2012/06/custom-form-radio-checkbox/

which is a really good tutorial, accomplishing custom checkboxes solely through css. However, in that example, the designer is faced with a trade-off:

Either the solution basically only works in chrome, or it becomes impossible to add labels which serve as extensions to the click-able area. The reason for this is that to obtain cross-browser compatibility, each checkbox is given an empty label, and all styling is applied to checkbox+label. The result is that if I add text to the label, it winds up inside the checkbox.

Does anyone know of a way to get both cross-browser functionality, as well as functional labels? The best solution I can come up with is adding the onclick-event to the label by hand? I really like having functional labels, as I think it's more touch-friendly.

2
javascripthtmlcsscheckbox
Why not just add a second label? – Tim B James
'cause somehow I thought that would also end up inside the box :) it seems it doesn't, though. might I suggest you make an answer I can accept? – Kaare

2 Answers

1
votes

You can simply add an extra <label> to the HTML anywhere else on the page.

For example:

<input type="checkbox" id="checkbox-2-4" class="regular-checkbox big-checkbox">
<label for="checkbox-2-4"></label>
<label for="checkbox-2-4">Your Label Text Here</label>

You can then click on either and will see the desired effect.

1
votes

Use extra labels!

<label for="checkbox-1-1">Label!</label>
<input type="checkbox" id="checkbox-1-1" class="regular-checkbox" />
<label for="checkbox-1-1"></label>

My demo puts them before, but you can put them afterwards (or anywhere else) and style them accordingly. The CSS in the article you mention is pretty good in that it's very specific about only the label immediately after the checkbox is to be styled, so as long as your 'genuine' label isn't that one, you'll be fine.