| Next revision | Previous revisionLast revisionBoth sides next revision |
| ideas:placeholder-styling [2013/01/23 10:31] – created tabatkins | 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. |
| - Add a new 'color-opacity' or 'foreground-opacity' property, use a :placeholder pseudoclass. Specify that UA styles for placeholders are roughly "input:placeholder { foreground-opacity: .5; }". | - Add a new 'color-opacity' or 'foreground-opacity' property, use a :placeholder pseudoclass. Specify that UA styles for placeholders are roughly "input:placeholder { foreground-opacity: .5; }". |
| - Adopt SVG's fill/fill-opacity/stroke/stroke-opacity properties, specifying that they only apply to text, and use a :placeholder pseudoclass. Specify that UA styles for placeholders are roughly "input:placeholder { fill-opacity: .5; }". | - Adopt SVG's fill/fill-opacity/stroke/stroke-opacity properties, specifying that they only apply to text, and use a :placeholder pseudoclass. Specify that UA styles for placeholders are roughly "input:placeholder { fill-opacity: .5; }". |
| | - Have both pseudo-element and pseudo-class, since there are uses for styling the input element in that state *and* styling the placeholder text. Placeholder names: :unedited and ::suggestion |
| |
| ===== Tab's Opinions ===== | ===== Tab's Opinions ===== |
| |
| 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 |
