Comments on: Fancy checkboxes and radio buttons

By: marko

marko — Wed, 21 Jun 2006 20:08:33 +0000

@Jens & Jery: See my previous comment. I’m not representing this technique in a way of the good or the bad practice, just providing you with a solution.

By: Jery

Jery — Wed, 21 Jun 2006 19:25:05 +0000

Nice trick. But I’m with sonja on this. I would also be worried about usability and accessibility.

By: Jens Meiert

Jens Meiert — Wed, 21 Jun 2006 12:56:38 +0000

Delayed due to comment post problems:

Listen to Sonja. Breaking interface conventions and standard input elements asks for caution.

By: Nick Fitzsimons

Nick Fitzsimons — Mon, 19 Jun 2006 14:47:42 +0000

I haven’t checked this in depth, but I heard recently that a better check for Safari is to test the userAgent for “WebKit” (or “webkit” in your code, as you use “toLowerCase”), as the code will then work in other applications that use the Apple HTML rendering component - for example, NetNewsWire.

By: brandon

brandon — Wed, 14 Jun 2006 20:32:34 +0000

seems like a lot of code for very little output, how’s it do in a mobile device?

By: marko

marko — Tue, 13 Jun 2006 18:26:16 +0000

@Koen: Thanks for the remark, it seems that I copied generated source. Anyway, it’s updated now.

By: Koen

Koen — Tue, 13 Jun 2006 18:06:39 +0000

Oh, and is there a workaround for the behaviour that i’m experiencing; when you click, the onclick event-handler is called twice?

By: Koen

Koen — Tue, 13 Jun 2006 18:04:23 +0000

Youre HTML example is not correct, you have already filled the class with c_off or c_on. But as you are mentioning, the JS adds this extra classname automatically. And because you’re checking for className’s that contain exaclty ‘label_check’ the script won’t work.

Btw, this line: l.className = (safari) ? (inp.checked == true) ? 'label_check c_on' : 'label_check c_off' : (inp.checked) ? 'label_check c_on' : 'label_check c_off';

is able to be shorter:
l.className = (safari && inp.checked == true || inp.checked) ? 'label_check c_off' : 'label_check c_on';

By: marko

marko — Tue, 13 Jun 2006 13:00:54 +0000

@Michael Thompson: All the CSS reposition is made after JS changes class names on the labels. Thanks for the remark, though.

By: Michael Thompson

Michael Thompson — Tue, 13 Jun 2006 12:04:42 +0000

Wow, tens of lines of extraneous code to style a checkbox? And it’s still not guaranteed to work in all browsers (and I mean visually work, a checked box is a checked box)?

Where can I sign up? I can see where this is appropriate and fun for entertainment sites; but if I ever see this anywhere else I’m leaving the web.

Any mobile devices with half of a CSS brain will position the input appropriately (off-screen), style the label’s background (unchecked until the JS runs), and most likely never be able to touch and/or handle the JS effectively.

Creative, though. :)

By: trovster

trovster — Tue, 13 Jun 2006 08:12:32 +0000

@ marko, what ‘fanaticism’?

By: Johan

Johan — Tue, 13 Jun 2006 05:40:09 +0000

@Mark & Johan: Thanks for the links! Now we have three different approaches here.

I tebi hvala!

By: Yannick

Yannick — Tue, 13 Jun 2006 03:20:50 +0000

trovster & Mauricio: Thanks for pointing that out. I wasn’t aware that it was changed in the WCAG 2.0 Spec.

By: marko

marko — Mon, 12 Jun 2006 22:09:18 +0000

@Mark & Johan: Thanks for the links! Now we have three different approaches here.

By: Johan

Johan — Mon, 12 Jun 2006 21:24:31 +0000

http://slayeroffice.com/code/custom_checkbox/

Just look at the code

By: Mark

Mark — Mon, 12 Jun 2006 20:16:31 +0000

Also see the original post regarding this technique, http://flog.co.nz/2005/04/27/arc-adams-radiocheckbox-customisation/

By: Mauricio Samy Silva

Mauricio Samy Silva — Mon, 12 Jun 2006 20:13:21 +0000

W3C specs says:

“To associate a label with another control implicitly, the control element must be within the contents of the LABEL element. In this case, the LABEL may only contain one control element. The label itself may be positioned before or after the associated control.”

See: http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.9.1

By: marko

marko — Mon, 12 Jun 2006 19:20:16 +0000

@trovster: From the link you provided, I can only read that the implicit label is the one without the for attribute, not automatically each one that is wrapped around the input element. In the example at hand, all the labels have the for attribute. Anybody else on that subject? Pixy’s technique is certainly very useful, but why the such fanaticism? : ) @Stephanie: Which version are you looking in? Everything seems to be alright in the latest stable Camino on my Mac. @Sonja: You’re absolutely right, I’m not encouraging anybody here, just providing a solution.

By: trovster

trovster — Mon, 12 Jun 2006 19:07:48 +0000

‘nothing wrong’ is not entirely correct. The (now slated) second version Web Content Accessibility Guidelines states that http://www.w3.org/TR/2005/WD-WCAG20-HTML-TECHS-20050630/#label implicit form labels are deprecated in favour of explicit labels.

The example are pretty, but I’d like to see a pure test case showcasing this technique. A lot of people will be able to use this as trail and error example, instead of trawling through an entire sites CSS/HTML and JavaScript.

I would also like to see all the form-related images combined like in the http://wellstyled.com/css-nopreload-rollovers.html Pixy no preload image method.

By: Sonja

Sonja — Mon, 12 Jun 2006 18:25:23 +0000

I would also be worried about usability with this. I’m just waiting for the first person to use an unhappy clown as an unchecked and a happy clown as a checked radio button. Some times the ‘nice’ submit button is in disguise already.

I’m not saying don’t use this. I’m saying think about your users for a bit (;