Styling Forms with CSS3 Selectors - Part 2

In the first part of this article, Christopher Schmitt talked about effective form styling using attribute selectors; now in part 2 he continues his exploration using CSS3 selectors to style enabled, disabled or checked form controls.

( Read the article )

I was looking for an article about forms styling in CSS3 for quite some time and this one works fine for me. I'm especially grateful for the IE substitute for the unsupported opacity atribute.

I wish I could see the disable and enable attributes supported by a wider range of browsers. Hopefuly they will be available in some near future.

The stepping further approach of coupling content auto-generation after the :disabledselector doesn't work

And it shouldn't work. Firefox has the correct behavior, actually. The :before and :after selectors should not be applicable to replaced elements.

See these links for more details on this:
https://bugzilla.mozilla.org/show_bug.cgi?id=169334
https://bugzilla.mozilla.org/show_bug.cgi?id=245633

Post edited Sunday, 27. January 2008, 10:17:25

Opera Mini does not support the Javascript call:

element.firstChild.nodeValue = something;

Thus, in order to make an equivalent call, I changed the element to an <input type="button"> element and can make the call:

element.value = something;

I can change the style of the element so that it doesn't look a button, but Opera Mini still highlights it as a clickable object. To circumvent this problem, I can disable the <input> element, but then the element "looks" disabled (for example, style="color:red" is ignored and the element is dimmed).

I wish that Opera Mini handled the overriding style attributes for disabled <input> elements.

thanks, Chuck

Actually, Opera Mini AND Opera Desktop don't support:

<input type="button" style="color:red" value="should be red" disabled/>

The text "should be red" is grayed out.