For form elements (<button>, <input>, <select>, <textarea>), we inherit the values of font-family and font-size (as we should). For consistency, the value of color should also be inherited, as user agents tend to specify that these form elements remain at their initial color (black).
Reduced test case: http://codepen.io/mattbrundage/pen/hFHoi
Hey. Yeah this has been on my todo list, but there must be some reason why I didn't include it yet. I'll revisit. Thanks!
Perhaps this is the reason: inheriting the color value overrides Firefox's default placeholder color. It looks like only Firefox exhibits this behaviour. I've updated the test case.
This side effect can be eliminated by normalizing the placeholder color -- something we've flirted with before: f9572a4
The fix performs in IE8 also (Have to ignore the placeholder text). Without it, there is no color inheritance.
@tomByrer : Thanks for your work on this, but examine our reduced test cases in Firefox vs. other browsers. The difference is still the placeholder color. Firefox apparently takes the element color and calculates a lighter shade of the same hue for the placeholder color.
This is because Firefox's default stylesheet has the following declaration:
(I think they added it in FF19 when they replaced :-moz-placeholder with ::-moz-placeholder)
(You can see all the defaults by loading resource://gre-resources/forms.css in Firefox.)
The placeholder doesn't actually have a default color. It inherits it from the input and displays at 50% opacity. I guess the reason for this is to make it work on all backgrounds (a gray color would be invisible on a similarly gray background).
My first reaction is that Firefox has the better behavior by having the the text input colors that is more transparent. Quite the discussion on CSS-Tricks placeholder thread about the same issue (& looks like Thibaut found it also).
I was hoping to ship a fix for everything else & leave the placeholder up for testing & other solutions, but not my call :) I'm not an expert here; should placeholder text be a solid gray by default, & stay gray when the other input fields are re-colored? Or is coloring with alpha better?
Setting a consistent color value for placeholders is probably the way to go with this. Chrome's current default of #a9a9a9 seems to work pretty well.
Changing the opacity would be unnecessary if there's a default color being specified and it avoids an issue in IE10 where attempting to set the opacity using :ms-input-placeholder affects the entire element. You can achieve the same affect in IE10 with RGBA, but it's going to prevent you from inheriting the color anyways.
Updated the test case here.
Inheriting the base text color at partial opacity seems like the saner default. If a user changes their base font and background color, partially transparent placeholder text will give more expected results.
@robwierzbowski if all browsers supported that styling it would probably be preferable, but that doesn't seem to be the case. As I said, IE10 sets the opacity of the entire input element when you apply the style to :ms-input-placeholder, making the input look disabled.
Ah, right you are. Don't know how I missed that.
Happy to let browsers do their own weird things for placeholder text. For someone using a specific browser, they'll be used to whatever the default is.
But color inheritance for select is not consistent. Chrome and Safari (on OS X) do not inherit the color. In general, they heavily restrict the style changes you can make to select without using -webkit-appearance:none.
Fix `font` and `color` inheritance for forms
Inherit all `font` properties.
Inherit `color` for form controls. Chrome and Safari on OS X will not
inherit `color` as they heavily restrict the author-defined styles that
will be respected for that element.