734337 - input { color: blue; } should not override color of placeholder text

Status: RESOLVED WORKSFORME

(Core :: Layout: Form Controls, defect)

Description

[Mathias Bynens]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_3) AppleWebKit/535.11 (KHTML, like Gecko) Chrome/17.0.963.66 Safari/535.11

Steps to reproduce:

The placeholder text will display in hot pink, but it shouldn’t:

    <style>input { color: hotpink; }</style>
    <input placeholder=foo>

Demo: https://tinker.io/be2f2

No other browser does this.


Actual results:

The placeholder text displays in hot pink.


Expected results:

The placeholder text color shouldn’t change when `input { color: … }` is set.

Comment 1

[Mounir Lamouri (:mounir)]

Yes, indeed. But this is known. When changing color, authors should change the placeholder color. Though, we might end up with better default but we need to have ::-moz-placeholder instead of :-moz-placeholder for that.

Comment 2

[Boris Zbarsky [:bzbarsky]]

I thought this was a purposeful decision, in fact, and one of the reasons we had done the pseudo-class thing.

Comment 3

[Mounir Lamouri (:mounir)]

(In reply to Boris Zbarsky (:bz) from comment #2)
> I thought this was a purposeful decision, in fact, and one of the reasons we
> had done the pseudo-class thing.

Yes, IIRC that was to force authors to think about the placeholder color because grey isn't always a good idea. Though, with a pseudo-element, we could use opacity which might fix that issue, I guess.

Comment 4

[Mathias Bynens]

(In reply to Mounir Lamouri (:volkmar) (:mounir) from comment #1)
> Yes, indeed. But this is known. When changing color, authors should change
> the placeholder color. Though, we might end up with better default but we
> need to have ::-moz-placeholder instead of :-moz-placeholder for that.

The problem with the current situation is that once `:-moz-placeholder` becomes `:placeholder` (or whatever the standardized version will be), authors that styled `<input>` color will have to go back and edit their stylesheets just to make the placeholder text look distinct again. I don’t think this is very useful.

Comment 5

[Karl Dubost💡 :karlcow]

Yesterday I opened a new Bug with description of the issue and screenshots.
Bug 1357674 without knowing this one.

It creates a Web Compat issue.
https://webcompat.com/issues/5895

Which way should I dup. 
old dup of the new (there's a bit more context in the new one).
new dup of the old.

hmm… let's try to DUP this into the new one.

Comment 6

[Karl Dubost💡 :karlcow]

Following discussion on Bug 1357674 with Boris (Thanks!).
Let's undup and resolves this as WORKSFORME.