nathansmith / formalize

Teach your forms some manners!
http://formalize.me
1.31k stars 120 forks source link

Placeholder color not applied #26

Closed simshaun closed 13 years ago

simshaun commented 13 years ago

In FF3.5, the color: #000 rule in

textarea,
select,
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"] {
  -webkit-appearance: none;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #fff;
  border: 1px solid;
  border-color: #848484 #c1c1c1 #e1e1e1;
  color: #000;
  outline: 0;
  padding: 2px 3px;
  font-size: 13px;
  font-family: Arial, sans-serif;
  height: 1.8em;

  /* IE7 */
  *padding-top: 2px;
  *padding-bottom: 1px;
  *height: auto;
}

is overriding the color specified afterwards for placeholder text in

/*
  Separate rule for Firefox.
  Cannot stack with WebKit's.
*/
input.placeholder_text,
textarea.placeholder_text,
input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #888;
}

The end result is black placeholder text in the forms.

Splitting off the Mozilla proprietary selectors into their own block fixes it.

input.placeholder_text,
textarea.placeholder_text {
  color: #888;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
    color: #888;
}
fnichol commented 13 years ago

Wow, should have checked here earlier. Found the same issue, and @simshaun's solution also works for me (I'm using the _formalize.sass file).

dfunckt commented 13 years ago

IE8 also has issues. If using the code simshaun gave above, IE8 will read the second rule -- even though it's not intended for itself. In order to work the rules have to be written like this:

::-webkit-input-placeholder {
    color: #888;
}

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

input.placeholder_text,
textarea.placeholder_text {
    color: #888;
}
nathansmith commented 13 years ago

Fixed...

https://github.com/nathansmith/formalize/commit/6382fe6c21c4e5dad1624092a09f067d256f5630

Sorry it took awhile to get to this. Somehow I'd marked the notification for this as "read" in Gmail, even though it hadn't been addressed.