Color for Styled Placeholder Text Is Muted in Firefox

Color for styled placeholder text is muted in Firefox

The default placeholder style has an opacity different from 1, so that if you change the input color the placeholder automatically ends up with a slightly muted version of that color.

Try setting opacity: 1 in addition to the color.

css - placeholder text color on firefox

Add opacity: 1 to the Firefox placeholders.

See updated fiddle

CSS: Why Color code #999 shades are different in Chrome and Firefox?

Firefox in version 19 and beyond by default applies an opacity of 40% (0.4) to placeholder text. Simply just add opacity: 1;

input:-moz-placeholder,
input::-moz-placeholder {
    opacity: 1 !important;
}

How to set the color and font style of placeholder text

You can use the following code for cross-browser support:

For Google Chrome:

.element::-webkit-input-placeholder {
    color: blue;
    font-weight: bold;
}

For Mozilla Firefox:

.element::-moz-placeholder {
    color: blue;
    font-weight: bold;
}

For Internet Explorer:

.element:-ms-input-placeholder {
    color: blue;
    font-weight: bold;
} 

For Opera:

.element:-o-input-placeholder {
    color: blue;
    font-weight: bold;
} 

Html Css buttons look different in Firefox

When you do not set fonts on your page, each browser uses its default fonts. This may well mean that the font family used in button elements varies. It is typically Arial, but Firefox has different settings, e.g. MS Shell Dlg in my system (Win 7). You can check such issues using each browser’s Developer Tools.

There’s also a difference in font size. When you set font size to 0.97em, browsers multiply the parent element’s font size by 0.97 and may then round the result, even in different ways. When the basic font size is the typical default of 16px, IE uses 15.52px, Firefox uses the correct exact value 15.53px, and Chrome uses 16px (i.e. rounds to in integral number of pixels). This, combined with font family variation, causes small differences.

You can make the rendering more uniform by replacing font-size: 0.97em by

font-size: 1em;

and adding

font-family: Arial;

in the rule with the .btn selectors.

This does not remove all differences, since browsers render fonts in slightly different ways, and not all systems have Arial (many modern handheld devices don’t). Rendering in Firefox and Chrome on Win 7:

Regarding font family, you could use a downloadable font (web font), to get more consistent results. Doing so just for a few buttons might be overkill, but maybe you have other use for it too.

Is there a way to change the color of an HTML5 textbox watermark?

See this answer.

Long story short, you need to use CSS Selectors to apply the rules to each browser, which handles the process differently.

input.mytextbox::-webkit-input-placeholder {  /* WebKit browsers */  color: red;}
input.mytextbox:-moz-placeholder {  /* Mozilla Firefox 4 to 18 */  color: red;  opacity: 1;}
input.mytextbox::-moz-placeholder {  /* Mozilla Firefox 19+ */  color: red;  opacity: 1;}
input.mytextbox:-ms-input-placeholder {  /* Internet Explorer 10+ */  color: red;}

<input class="mytextbox" type="text" name="mytextbox" placeholder="MyTextBox"/>

---

Related Topics