color value of form elements is not being inherited #157

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

Projects

None yet

6 participants

@mattbrundage
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
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
Contributor

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

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

@mattbrundage
Contributor

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

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

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

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

@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

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

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

@necolas necolas added a commit that closed this issue Jan 15, 2014
@necolas 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.

Fix gh-157
0b5badd
@necolas necolas closed this in 0b5badd Jan 15, 2014
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment