html - css クラスがテキストエリアで正しく動作しない

Question

3 つのテキスト ボックスと 1 つのテキスト領域があるフォームがあります。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

text クラスに font-family 属性を追加してみてください。

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