| Next revision | Previous revisionNext revisionBoth sides next revision |
| ideas:placeholder-styling [2013/01/23 10:31] – created tabatkins | ideas:placeholder-styling [2013/01/24 13:18] – [Styling Placeholders] 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. |
