Menu icon Foundation
v5.5.2 - input placeholders are barely legible

After upgrading to Foundation 5.5.2 the placeholder texts of input fields, textareas and so on now appear way too bright, as the browser's default values become overwritten by Foundation's css file.

Maybe one should remove these lines with the next release, as placeholder texts appear nearly illegible now. Most browsers even add opacity to the given "color" value, so the text appears even more diffuse.

Kind regards
Dominik

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

:-moz-placeholder {
  /* Firefox 18- */
    color: #cccccc;
}

::-moz-placeholder {
  /* Firefox 19+ */
    color: #cccccc;
}

:-ms-input-placeholder {
    color: #cccccc;
}

placeholder text input textarea

After upgrading to Foundation 5.5.2 the placeholder texts of input fields, textareas and so on now appear way too bright, as the browser's default values become overwritten by Foundation's css file.

Maybe one should remove these lines with the next release, as placeholder texts appear nearly illegible now. Most browsers even add opacity to the given "color" value, so the text appears even more diffuse.

Kind regards
Dominik

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

:-moz-placeholder {
  /* Firefox 18- */
    color: #cccccc;
}

::-moz-placeholder {
  /* Firefox 19+ */
    color: #cccccc;
}

:-ms-input-placeholder {
    color: #cccccc;
}

This post has been closed. No new replies can be added.

Dominik Scholz about 4 years ago

CSS above comes from foundation/css/foundation.css, but browsers' default value is just black / #000000 (adding ~ 50 % opacity).

Rafi Benkual about 4 years ago

Having the value as a variable is an improvement, but it does seem to be a bit lighter. Bumping up the default color to something darker seems to be the best option. I tested it and made the change for the next release.

Dominik Scholz about 4 years ago

I'm not even sure if it is a good idea to make the placeholder color configurable, as probably only few users will make use of it. Myself, I have never changed that color in my past projects because it has always been just suitable (light grey with ~ 50 % opacity).

Why make something configurable when it's already fine?

Rafi Benkual about 4 years ago

I can see your point, that some people might mess this up. The reason it was added was someone wanted to have the control to darken the placeholder on a certain browser since they all treat it slightly different.

I wouldn't use it for anything other than color, font-style, and font-variant. Usually we leave this up to people to add themselves if they need it.

Anyways, I fixed the default so each browser has their default lightness.

Dominik Scholz about 4 years ago

Alright, thanks for fixing it that quickly :-)