1

如果用户没有正确输入字段，它将显示带有class="ErrorInput"和的错误消息class="TextError"。

我在ErrorInput类中遇到问题，当它已在 html 标记中定义时 - 它不会覆盖默认输入类。

HTML：

<li>
  <label>First Name</label>
   <input type="text" value="" class="ErrorInput" name="firstname">
   <div class="TextError">Please enter First Name</div>  
</li>
<li>
   <label>Second Name</label>
   <input type="text" value="Gates" name="secondname">
</li>

CSS：

.FormStyle .ErrorInput {
    border: #AD2930;
}

.FormStyle input[type=text], .FormStyle textarea {
    padding: 3px;
    display: inline-block;
    width: 290px;
    border: 1px solid #BDC7D8;
    margin: 0;
    font-size: 12px;
}
4

2 回答 2

4

您正在border-colour为两者中的输入定义.FormStyle .ErrorInput和.FormStyle input[type=text]

.FormStyle input[type=text]比 更具体，.FormStyle .ErrorInput应用#BDC7D8颜色。

您需要使第一个 CSS 选择器更具体，以覆盖第二种颜色：

.FormStyle input[type=text].ErrorInput {
    border-color: #AD2930;
}

在此处了解有关特异性的更多信息：http: //coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

于 2012-10-01T17:32:15.343 回答
0

您需要正确指定边框：

.FormStyle .ErrorInput {
    border: 1px solid #AD2930;
}

而且这个css部分必须放在输入样式之后

于 2012-10-01T17:32:41.863 回答