firefox textarea占位符填充

Question

我在使用textarea项目编辑占位符的CSS时遇到了一些麻烦。 它在除Firefox外的所有浏览器中都能正常工作。 占位符（在firefox中）采用除padding之外的所有CSS属性。 下面是最小代码和一个JSFiddle重现该问题

<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

而不是将padding:5px给占位符，而padding:5px其提供给textarea 。 这样，您可以确定不会有任何问题；
看到这里jsfiddle

代码：

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>