Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revisionLast revisionBoth sides next revision |
ideas:placeholder-styling [2013/01/24 13:09] – [Styling Placeholders] astearns | ideas:placeholder-styling [2013/02/05 19:32] – [Styling Placeholders] note relationship to CSS4-UI Tantek |
---|
====== Styling Placeholders ====== | ====== Styling Placeholders ====== |
| |
| [[spec/css4-ui|CSS4 UI]] is exploring new [[spec/css4-ui#more-selectors|UI related selectors]], such as a :placeholder psuedo-class (or ::placeholder pseudo-element). |
| |
The overarching issue is whether to use a pseudoclass or pseudo-element. A sub-issue here is how to style the placeholder text; different methods bias us toward resolving the main issue in different ways. | The overarching issue is whether to use a pseudoclass or pseudo-element. A sub-issue here is how to style the placeholder text; different methods bias us toward resolving the main issue in different ways. |
| |
So, I recommend we adopt #5. We can look to WebKit's existing properties for guidance in figuring out the fiddly details (like sizing/positioning of images used for fill/stroke). The properties will probably go in Text Decoration, but we can figure out exactly where to put them later. | So, I recommend we adopt #5. We can look to WebKit's existing properties for guidance in figuring out the fiddly details (like sizing/positioning of images used for fill/stroke). The properties will probably go in Text Decoration, but we can figure out exactly where to put them later. |
| |
| ===== On #6 versus #3 ===== |
| |
| Option 6 (best of both worlds, new names) is preferable to 3 in that the pseudo-class name better represents the element state, and a specific pseudo-element for the suggested text is more clear than styling a 'placeholder value' which is never properly a value of the input element. Perhaps, given the 'placeholder' attribute in the HTML spec (referring to the suggested text, not the input element state) the pseudo-element should be named ::placeholder and the pseudo-class named :blank or :unedited |