Skip to content
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

Closed
mattbrundage opened this issue Jan 11, 2013 · 11 comments
Closed

color value of form elements is not being inherited #157

mattbrundage opened this issue Jan 11, 2013 · 11 comments
Labels

Comments

@mattbrundage
Copy link
Contributor

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

@necolas
Copy link
Owner

necolas commented Jan 11, 2013

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!

@mattbrundage
Copy link
Contributor Author

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

@tomByrer
Copy link

The fix performs in IE8 also (Have to ignore the placeholder text). Without it, there is no color inheritance.

@mattbrundage
Copy link
Contributor Author

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

@Thibaut
Copy link

Thibaut commented Mar 29, 2013

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)

input::-moz-placeholder,
textarea::-moz-placeholder {
  opacity: 0.54;
}

(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).

@tomByrer
Copy link

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?

@grantgeard
Copy link

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.

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: #a9a9a9;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
    color: #a9a9a9;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
    color: #a9a9a9;
    opacity: 1;
}

Updated the test case here.

@robwierzbowski
Copy link

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.

@grantgeard
Copy link

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

@robwierzbowski
Copy link

Ah, right you are. Don't know how I missed that.

@necolas
Copy link
Owner

necolas commented Jan 15, 2014

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

6 participants