Ahhh, thank you very much. This is the first i've heard the term 'replaced elements', but after reading the specs on what they are, it makes complete sense why this is the case.
1. So I didn't necessarily do something 'wrong', other than develop in Chrome first. 2. I did miss something in the specs; adding :after to things like form elements and images is not a defined behavior, so the browser will behave peculiarly. Do you, or does anyone else, know of a CSS-only approach to accomplish this task in all modern browsers? </email> <signature id="paceaux" name="Frank M. Taylor" twitter="@paceaux" /> On Oct 22, 2012, at 1:25 AM, Philippe Wittenbergh wrote: > > Le 22 oct. 2012 à 15:50, Frank Taylor <pace...@madebypaceaux.com> a écrit : > >> I'm working on an application where the client wants input[type="textbox"] >> to look more like a sliding on/off switch than a typical checkbox. I was >> able to produce the desired effect for -webkit browsers: >> http://cssdesk.com/jJd87 >> >> But, It would appear as though :after{content:"blah"} doesn't work on in >> non-webkit browsers. Opera seems to entertain the notion, but FireFox >> doesn't try at all. I've experimented with input, select, and textarea in >> FireFox and none seem to want to produce generated content. >> >> I've read through the specs and I don't see where it's written that :after >> or ::after shouldn't produce generated content for form elements: >> http://www.w3.org/TR/CSS2/generate.html#content. >> >> 1. Have I done something wrong in the CSS that causes >> input[type="checkbox"]:checked:after to not work in FireFox/ Opera? >> 2. Have I missed something in the specs that makes this approach invalid? > > Read the last paragraph (in green) in > http://www.w3.org/TR/CSS2/generate.html#before-after-content. > Form controls are replaced elements. > > Note that it is only Safari 6 and recent Chrome that support that generated > content on form controls (and Mobile Safari on iOS 6). > > Philippe > -- > Philippe Wittenbergh > http://l-c-n.com > > > > > ______________________________________________________________________ > css-discuss [css-d@lists.css-discuss.org] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > List policies -- http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
