chris-pearce / scally

Scally is a Sass-based, BEM, OOCSS, responsive-ready, CSS framework that provides you with a solid foundation for building reusable UI's quickly 🕶
https://twitter.com/scally_fw
Apache License 2.0
285 stars 20 forks source link

Standardise and provide a setting to consistently style input placeholders #117

Closed stowball closed 9 years ago

stowball commented 9 years ago

All browsers behave slightly differently with their placeholder colours, and Firefox reduces the opacity to 0.54 by default.

It would be great for Scally to help standardise this like Suzi does.

We'd need to set FF's opacity to 1, and provide a default colour var that all browsers used, which could easily be override by the developer like other settings. Something like this:

$text-input-placeholder-color: rgba($colour-text-base, 0.4) !default;

:-moz-placeholder {
  color: $text-input-placeholder-color;
  opacity: 1;
}

::-moz-placeholder {
  color: $text-input-placeholder-color;
  opacity: 1;
 }

:-ms-input-placeholder {
  color: $text-input-placeholder-color;
 }

::-webkit-input-placeholder {
  color: $text-input-placeholder-color;
}
chris-pearce commented 9 years ago

@stowball yeah good shout, I used to have this in the framework but took it out, can't remember why but we'll get this in Scally :+1:. And include the standard property.

chris-pearce commented 9 years ago

Labels please.