CSSNinja’s custom forms revisited to work with CSS sprites

I read today CSS Ninja‘s (Ryan Sheddon’s) brilliant new technique about the creation of custom checkboxes and radio buttons with CSS alone.

The only thing that bugged me about it was something he pointed himself out as well:

This technique has only 1 drawback I can think of, IE support is not a drawback for me, you can’t use a big sprite image to save all the radio and checkbox states, they need to be individual images. Using CSS generated content to insert an image doesn’t give you control of the image position like a background image does.

And then I wondered “but hey, why can’t we use background images?”. It seemed pretty obvious to me that we could combine a transparent text color with normal css sprites and a display of inline-block in the ::before pseudo-element to achieve the exact same effect. I verified that my initial assertion was actually correct, and tested it in Firefox, Chrome, Safari and Opera (the latest only, no time for testing in older ones at the moment) and it seems to work fine.

Here it is: demo | source files (including .psd file of the sprite)

I’m afraid there’s some blatantly obvious drawback in my approach that made Ryan prefer his method over this, but I’m posting it just in case…

  • http://www.thecssninja.com/ Ryan

    That’s brillaint, can’t believe I didn’t think of that! Will update my demo and give you credits in the article.

  • MarcusT

    Nice!

    Only real bug I get is that I’m seeing clipping of the bottom of the j/y/g characters in the line “Please make the CSS Ninja stop from trying to make me rich or poor”…

    I would also like critique the applied styling a little:

    1) The blue-text-on-selection effect is unexpected (i.e. compared to normal HTML forms) hence actually detracts from the overall user experience – it should apply the standard dotted outline instead.

    2) However, that’s not to say that the blue-text formatting is completely useless, I suggest that it would work well as a hover effect instead, though only if consistently applied to all form elements (i.e. graphically to the radio/check/text fields – perhaps using another state in the image state – in addition to being applied to the text labels that accompany them)

    • http://leaverou.me Lea Verou

      MarcusT, these are the same in the original as well, so you probably should post this comment in CSS Ninja’s blog. :)
      I only tweaked the generated content, I didn’t change anything else. Did you actually read my post? :)

      By the way, I also didn’t like the blue text, but Ryan is a front-end developer, not a designer. And as a front-end developer, he rocks. :)

      • Werwr

        werwerw werwerwrw

  • dgdfg

    vcwrw eyrtwuer

  • http://twitter.com/mufaddal_mw Mufaddal

    Thanks for this cool stuff :)