- From: Aryeh Gregor <Simetrical+w3c@gmail.com>
- Date: Sat, 20 Mar 2010 21:50:15 -0400
- 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 UTC