Comments on: Pushing the boundaries of web design. The ultimate user interface. http://blog.webdistortion.com/2008/06/11/pushing-the-boundaries-of-web-design-the-ultimate-user-interface/ An eclectic mix of articles on all aspects of site management including, design, development marketing and web promotion. Fri, 30 Jul 2010 20:35:16 +0000 hourly 1 http://wordpress.org/?v=3.0 By: Shadowfiendhttp://blog.webdistortion.com/2008/06/11/pushing-the-boundaries-of-web-design-the-ultimate-user-interface/comment-page-1/#comment-1444 Shadowfiend Fri, 13 Jun 2008 14:20:33 +0000 http://blog.webdistortion.com/?p=278#comment-1444 I've always preferred the method for checkboxes that involves hiding the checkbox itself using CSS, giving its accompanying label some left padding, and then giving it a background image. It's *almost* a JS-free solution, only because there's no way to select down and then back up the DOM tree in CSS, you need JS to set a class on the label or the containing element of the checkbox and label when the checkbox is checked.I say this is because you can't select down and then back up because if you could say `input[type=checkbox][checked=checked]:parent ...', then the JS wouldn't be needed, as the wrapping element could be styled appropriately.Although, now that I think of it, `input[checked=checked] + label' should work on non-IE browsers... Need to play with that at some point. I’ve always preferred the method for checkboxes that involves hiding the checkbox itself using CSS, giving its accompanying label some left padding, and then giving it a background image. It’s *almost* a JS-free solution, only because there’s no way to select down and then back up the DOM tree in CSS, you need JS to set a class on the label or the containing element of the checkbox and label when the checkbox is checked.

I say this is because you can’t select down and then back up because if you could say `input[type=checkbox][checked=checked]:parent …’, then the JS wouldn’t be needed, as the wrapping element could be styled appropriately.

Although, now that I think of it, `input[checked=checked] + label’ should work on non-IE browsers… Need to play with that at some point.

]]>