Styling HTML placeholder attribute

Hi,

Styling forms element is generally speaking painful and even the very
simple HTML placeholder attribute follows that rule. Currently, as most
form control styling, it is proprietary.

The current situation seems to be:
- Webkit: ::-webkit-input-placeholder pseudo-element;
- IE10: :-ms-input-placeholder pseudo-class;
- Gecko18-: :-moz-placeholder pseudo-class;
- Gecko19+: ::-moz-placeholder pseudo-element;
- Presto: nothing.

Recently, Gecko moved from a pseudo-class to a pseudo-element [1] for
multiple reasons.
First of all, there was a real problem in using a pseudo-class if we
wanted to show the placeholder while the element is focused and empty.
For example, ":-moz-placeholder { color: white; }" would give a white
color the element when the placeholder is visible which means that, when
focused an empty element, the caret would be white and if the background
of the element is white, it would make the caret just no longer visible
putting the user in a situation where it isn't clear whether the element
has been focused or not.
In addition, a pseudo-element gives more possibility to the author: it
is possible to set an opacity, put some margins, etc. However, those
possibilities have to be limited, as they are for ::first-line and
::first-letter.

We believe that the current situation is less than ideal and we would
like to push to get the placeholder styling specified. Currently, it
seems that Gecko's and Webkit's implementations are very similar. The
set of allowed rules are slightly different and the default styling
isn't the same but those are clearly solvable issues.
However, IE is currently using a pseudo-class as Gecko was. What are the
reasons that made IE use a pseudo-class instead of a pseudo-element? Can
a switch to a pseudo-element be considered?

Ideally, I would have liked to start a specification fully dedicated to
style form controls but I unfortunately don't have much time for that
but I believe that we should be able to easily push this to css3-ui if
we can find an agreement quickly. Mozilla would be more than happy to
drop the prefixes as soon as possible.

FWIW, the current Gecko implementation can be described as follow:
- pseudo-element;
- restricted set of rules: as '::first-line' + 'opacity';
- default style: "opacity: 0.54;" [2].

[1] https://bugzilla.mozilla.org/show_bug.cgi?id=737786
[2] https://bugzilla.mozilla.org/show_bug.cgi?id=556145

Cheers,
--
Mounir

Received on Monday, 21 January 2013 23:23:07 UTC