firefox textarea占位符填充

Question

I am having some trouble editing placeholder's CSS with a textarea item. It works fine in every browser except firefox. The placeholder (in firefox) takes every CSS attribute except padding . Below is the minimum code and a JSFiddle reproducing the problem

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

::-webkit-input-placeholder {
    color: #FFF;
    text-align:left;
    font-size:11px;
    padding:5px;
}
:-moz-placeholder { /* Firefox 18- */
    color: #FFF;
    text-align:left;
    font-size:11px;
    padding:5px;
}
::-moz-placeholder {  /* Firefox 19+ */
    color: #FFF;
    text-align:left;
    font-size:11px;
    padding:5px;
}
:-ms-input-placeholder {  
    color: #FFF;
    text-align:left;
    font-size:11px;
    padding: 5px;
}

https://jsfiddle.net/1wxqdh63/

Answer 1

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>