Next revision | Previous revisionNext revisionBoth sides next revision |
ideas:placeholder-styling [2013/01/23 10:31] – created tabatkins | ideas:placeholder-styling [2013/01/24 17:15] – [On #6 versus #3] astearns |
---|
- 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 |