html - css 类不适用于文本区域

Question

我有一个表单，其中有三个文本框和一个文本区域。我使用 css 类自定义了表单中所有这些元素的外观。但是文本区域内的文本的格式与文本框不同。为什么这仅发生在文本区域，而文本框工作正常。这是问题的图片。

这是我的代码。

HTML

<form id="contact_form">
                <ul>
                    <li>
                        <input id="Text1" class="text" type="text" placeholder="Name:" /></li>
                    <li>
                        <input id="Text2" class="text" type="text" placeholder="E-Mail:" /></li>
                    <li>
                        <input id="Text3" class="text" type="text" placeholder="Phone:" /></li>
                    <li>
                        <textarea id="TextArea1" class="text textarea" placeholder="Message"></textarea></li>
                </ul>

CSS

 #contact_form ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

.text {
    border: none;
    outline: none;
    color: red;
    background: brown;
    padding: 2%;
    margin:0 0 10px 8%;
}
.textarea {
    resize:vertical;
}

Answer 1

只需将字体属性添加到您的 css：因为默认值不同

.text {
  border: none;
  outline: none;
  color: red;
  background: brown;
  padding: 2%;
  margin:0 0 10px 8%;
  font-family:arial;
  font-size:11px;
}

查看演示http://jsfiddle.net/4dW37/1/

Answer 2

对不起，误读了你的问题。但是如果你想改变占位符文本的颜色，你现在知道了，哈哈。

您需要直接设置占位符伪元素的样式...

请注意，您不能将它们全部组合成一个函数。每个伪元素都需要单独设置样式。

例子：

input.text::-webkit-input-placeholder {
   color: white;
}

input.text:-moz-placeholder { /* Firefox 18- */
   color: white;  
}

input.text::-moz-placeholder {  /* Firefox 19+ */
   color: white;  
}

input.text:-ms-input-placeholder {  
   color: white;  
}

Answer 3

您可以尝试将 font-family 属性添加到文本类。

.text {font-family:"Times New Roman",Georgia,Serif;}