RE: Styling HTML placeholder attribute

[Mounir Lamouri:]
 
> With the pseudo-class approach, styling the placeholder color means
> styling the input element's color which is the color of the text, thus the
> caret of the element.
> Therefore, let say there is a pseudo-class named ':placeholder', something
> like:
> data:text/html,<style>input:placeholder { color: gray; } input {
> background: black; color: white; }</style><input placeholder='foobar'>
> Will show a gray placeholder but it would actually change the color of the
> input to gray when the input shows the placeholder. That means, if the
> placeholder is shown while the element is focused, the input will still
> use that gray color and the caret will be shown as 'gray'.
> 

Alternatively, the placeholder text disappears when the control is focused.
This is what IE10 does, though I see why others may prefer to keep it visible
until the first keystroke. Requiring the caret color to match that of the
placeholder text seems like an implementation detail; from a user standpoint
there is no reason why they must match. (And I appreciate that making them
different may be more work than it sounds implementation-wise).

Received on Thursday, 31 January 2013 17:23:00 UTC