Re: Customize HTML5 forms placeholder style

On 03/20/2010 01:34 AM, Tab Atkins Jr. wrote:
> On Fri, Mar 19, 2010 at 5:21 PM, Mounir Lamouri
> <mounir.lamouri@gmail.com> wrote:
>> Even if that may work in most situations, I think forcing the
>> placeholder to a specific opacity value by the UA is not a good
>> solution. Indeed, the opacity may work in most situations but with no
>> doubt, some websites will not use the placeholder attribute because they
>> will not like the default value.
> 
> I'm confused.  By this logic, *any* value for *anything* for the
> placeholder would be bad.  The point is to find an opacity value that,
> for standard black-on-white, approximates a dark-gray-on-white.
> Authors can always change this if they want.

I said that considering the opacity was replacing the ability to
customize the placeholder style. I probably misunderstood the idea.

>> For example, we want to have an italic placeholder for Gecko.
>> I think we can't prevent the placeholder style customization with the
>> opacity. However, we may specify a specific opacity value as the default
>> placeholder style but I have an other simple concern against this idea:
>> opacity is less eye-candy than darkgrey.
> 
> I'm confused.  The point of the opacity is that it transforms
> black-on-white into dark-gray-on-white.  What is less eye-candy about
> it?  It just has the additional benefit that it should work
> analogously for all text and background color combinations.

Actually, I've tested with 0.6 opacity which is not the best value. On
WebKit the default color is darkgrey, if I recall correctly, and we are
able to get something looking more or less like darkgrey with opacity
values between 0.3 and 0.4. However, it is not the exact same style and
I prefer the darkgrey's one.

Here is a small HTML sample to test:
<html>
  <style>
    input.test::-webkit-input-placeholder { opacity: 0.35; }
    input.test, input.test::-webkit-input-placeholder { color: black; }
  </style>
  <body>
    <input placeholder="placeholder">
    <input class="test" placeholder="placeholder">
  </body>
</html>

Anyway, I am not a website designer so my point of view about the style
quality is not really important and as you said, the additional benefit
is important.

--
Mounir

Received on Saturday, 20 March 2010 01:36:18 UTC