-
Notifications
You must be signed in to change notification settings - Fork 10.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
color value of form elements is not being inherited #157
Comments
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:
(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 Changing the
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 |
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 |
For form elements (
<button>
,<input>
,<select>
,<textarea>
), we inherit the values offont-family
andfont-size
(as we should). For consistency, the value ofcolor
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
The text was updated successfully, but these errors were encountered: