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提供给占位符，将其提交给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>

firefox textarea占位符填充

1 个答案: