Re: Styling HTML placeholder attribute

On Jan 22, 2013, at 1:41 PM, Sylvain Galineau <sylvaing@microsoft.com> wrote:

>> On the other hand, if we used a pseudo-element, the UA style could be:
>> 
>> input::placeholder { opacity: .54; }
>> /* for black-on-white, produces a color that is approximately #8a8a8a */
>> 
>> Then, if the author changed to "color: white; background: gray;", the
>> placeholder text color would be approximately #c5c5c5, which, while not
>> great for contrast, is still nearly double the contrast value of
>> #999 <http://leaverou.github.com/contrast-ratio/#%23c5c5c5-on-gray>.
>> 
>> It should be easy to come up with a similar example for non-black/white
>> colors, where the opacity approach preserves the author's intended color,
>> while the color approach changes it to gray.

Im a bit on the fence with this issue. I agree that this would be a very nice benefit to have alpha-generated colors for the placeholder text. If I want a yellow or beige or orange background on an input, I'd rather not have to work out what values to use for dark yellow, dark beige, dark orange, etc.

But on the other hand, placeholder just seems more intuitively like it should be a pseudo-class. The color of the text in it changes according to state. In slightly older versions of Mac OS, it could be thought of as :inactive-default-text, just as there is an :active pseudo-class. Now in later Mac versions and in iOS (and others), it is just the input's state of having default text instead of user-entered or author-entered text (i.e. it is visible even in :active state). But it is still the entire text of the input that is being styled. 

> This particular scenario doesn't suggests a pseudo-element to me as much as a 
> property to set foreground color alpha independently of foreground color. That 
> could be more generally useful.

THAT would be awesome. I was working on something a week or so ago where that would have made things much easier. I think I ended up using a wrapper element around the text I wanted to change opacity on, because I couldn't predict ahead of time what color it would be, and I only wanted to change the alpha. Something like 'color-alpha' that multiplied with the color's existing alpha (the 'a' in 'rgba', frex) would be great. That would be nicer than an alpha override, but even an override would be welcome. 

Received on Wednesday, 23 January 2013 03:15:53 UTC