W3C home > Mailing lists > Public > www-style@w3.org > March 2010

Re: Customize HTML5 forms placeholder style

From: Aryeh Gregor <Simetrical+w3c@gmail.com>
Date: Sat, 20 Mar 2010 21:50:15 -0400
Message-ID: <7c2a12e21003201850w6743249cuf58f010d167235de@mail.gmail.com>
To: Mounir Lamouri <mounir.lamouri@gmail.com>
Cc: "Tab Atkins Jr." <jackalmage@gmail.com>, www-style@w3.org
On Fri, Mar 19, 2010 at 9:35 PM, Mounir Lamouri
<mounir.lamouri@gmail.com> wrote:
> I said that considering the opacity was replacing the ability to
> customize the placeholder style. I probably misunderstood the idea.

I was just suggesting that we use a pseudo-element, and that the
suggested UA default stylesheet include ::placeholder { opacity: xxx }
(0.6 or 0.35 or whatever).  If UAs used that instead of setting a
color, it would work fairly well even if authors changed the input
colors around.

> <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>

Consider what happens if the author recolors the input (copy into URL
bar to test):

data:text/html,<!doctype html>
<style>
   input.test::-webkit-input-placeholder { opacity: 0.35; color: inherit }
   input { background: #bbb }
 </style>
 <body>
   <input placeholder="placeholder">
   <input class="test" placeholder="placeholder">
 </body>
</html>

In current WebKit, the left box is almost illegible, but the right one
looks fine.  Likewise, with a black background and white text, the
left looks much more prominent than it does against a white
background, while the second input's placeholder looks appropriately
subdued.

Of course, authors should still be able to style ::placeholder
themselves if they want more fine-grained control.
Received on Sunday, 21 March 2010 01:50:51 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:25 GMT