This content originally appeared on Lea Verou’s blog and was authored by Lea Verou
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…
This content originally appeared on Lea Verou’s blog and was authored by Lea Verou
Lea Verou | Sciencx (2010-02-19T00:00:00+00:00) CSSNinja’s custom forms revisited to work with CSS sprites. Retrieved from https://www.scien.cx/2010/02/19/cssninjas-custom-forms-revisited-to-work-with-css-sprites/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.