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

抱歉，误解了您的问题。但是如果你想改变占位符文本的颜色，你现在知道大声笑。

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

注意，您不能将它们全部合并为一个功能。每个Pseudo-element都需要单独设置样式。

示例：

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