Styling Placeholder on Firefox

css - placeholder text color on firefox

Add opacity: 1 to the Firefox placeholders.

See updated fiddle

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;
}

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).

firefox textarea placeholder padding

instead of giving padding:5px to the placeholder, give it to textarea. that way you are sure you won't have any problems;

see here jsfiddle

code :

textarea { 
padding:5px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
::-webkit-input-placeholder {
    text-align:left;
    font-size:11px;
}
:-moz-placeholder { /* Firefox 18- */
    text-align:left;
    font-size:11px;
}
::-moz-placeholder {  /* Firefox 19+ */
    text-align:left;
    font-size:11px;
}
:-ms-input-placeholder {  
    text-align:left;
    font-size:11px;
}

html :

<textarea rows="4" name="mensaje" placeholder="CONSULTA" required="required" >  </textarea>

adding placeholder text to select input - firefox

You can add option with month value in below format it will act as placeholder and it will worki in chrome as well as firefox.

<select name="exp_date" id="exp_date" style="width: 50%; display: inline; border-top-left-radius: 0px; border-bottom-left-radius: 0px; border-right: none; cursor: pointer;" class="form-control" title="Enter Expiration Date - Month">
        <option value="" selected disabled hidden>Month</option>
        </option><option value="01" label="1">1
        </option><option value="02" label="2">2
        </option><option value="03" label="3">3
        ...
    </select>

Firefox -moz-placeholder, not working

If one part of a selector is invalid, then the whole selector will be invalidated.

Therefore, one needs to have two different rules for each of -moz- and -webkit-.

---

Related Topics