CSS - Placeholder Text Color on Firefox

css - placeholder text color on firefox

Add opacity: 1 to the Firefox placeholders.

See updated fiddle

Firefox placeholder color changes

This is actually a conscious implementation choice (and the reason the placeholder styling is a pseudo-class, not a pseudo-element). The problem with the WebKit approach here is that if you style both color and background of an input with a placeholder, WebKit will apply the background color but not the color style and the placeholder text can easily end up unreadable. Of course you can work around that with placeholder-specific styles, but people typically forget to.

moz-placeholder does not work in Firefox

I'ts working, it's just that the last rule is considered more specific by Firefox. Try this:

::-webkit-input-placeholder { color:red; }
.row input[type="text"]::-moz-placeholder { color:red; }
.row input[type="text"]:-moz-placeholder { color:red; }

.row input[type="text"] {
     color: blue;     
}

See this fiddle for a working demo.

I'm unsure where the difference in browsers comes from, or which one is "correct". A similar experiment with a tag and :hover pseudo class shows the same behavior in both FF and Chrome: both will ignore the pseudo class color if the element's selector is more specific (and if you make the same change as I suggested above you get the same (expected?) behavior in both Chrome and FF).

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.

Styling placeholder on Firefox

I tried some weird stuff, but that seems to fit :

See this jsFiddle

You will have to put the required attribute on you textarea :

<textarea placeholder="Placeholder" required="required"></textarea>

Here is the CSS :

textarea {
    height: 300px;
    width: 300px;
    /* center the text by default */
    text-align:center;
    resize: none;
}

/* align the text left when insert */
textarea:focus {text-align: left;} 
/* textarea not empty will have text align left */
textarea:not(:invalid) {text-align: left;}
/* remove the red shadow of firefox if textarea is empty */
textarea:invalid {box-shadow: none;}
/* hide the placeholder on focus */
textarea:focus::-moz-placeholder {opacity: 0;}

textarea::-moz-placeholder {
    position: relative;
    font-size: 16px;
    font-style: italic;
    color: #ABABAB;
    /* the main trick to center the placeholder vertically */
    line-height:300px;
}

textarea::-webkit-input-placeholder {
    position: relative;
    font-size: 16px;
    font-style: italic;
    color: #ABABAB;    
    line-height: 300px; 
    /* keep the placeholder centered under chrome */
    text-align: center;
}

How to change placeholder color for number input? (Firefox)

try this

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #909;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #909;
   opacity:  1;
}

http://jsfiddle.net/hbirjand/7x61fmgt/

---

BUT

input with type="number"
It's apparently a bug:
Firefox bug

Font color of placeholder difference between Firefox 23.0.1 Chrome 23.0.1271.64 and IE 8

The placeholder attribute isn't supported by IE until IE 10, so that explains that.

Firefox apparently applies opacity:0.54 to the placeholder text:
http://css-tricks.com/snippets/css/style-placeholder-text/

This will fix:

.input::-moz-placeholder { color:blue; opacity: 1; } /* FF 19+ */
.input:-moz-placeholder { color:#bbb; opacity: 1; } /* FF 18- */

Why is Firefox altering my input/placeholder colours?

Here's what the default placeholder styling in Firefox is:

input::-moz-placeholder,
textarea::-moz-placeholder {
  opacity: 0.54;
}

without any color styles at all (reference is http://hg.mozilla.org/mozilla-central/file/a07aebef20e7/layout/style/forms.css#l160). This is important, because this way if you just set color and background on your input, and don't have any special placeholder styling it'll pick up the color you set but just make it look more faded out.

So if you want to completely restyle the placeholder, set its opacity to 1.

---

Related Topics