Question

我正在尝试将红色边框颜色的错误类应用到我的文本输入字段，如下所示：

jquery的

//save
...
$("input.required").each(function(){
    if ($.trim($(this).val()).length == 0){                               
        $(this).addClass("form_error");
        formValid = false;
    }
    else{
        $(this).removeClass("form_error");
    }
});

HTML

<div class="control-group">
  <label class="control-label" for="city_id">City</label>
  <div class="controls">
    <input class="span2 required" type="text" value="" name="test" id='testId'/>
  </div>
</div>

CSS

textarea,
input[type="text"]{
  border: 1px solid #cccccc;
}

.form_error {
  border-color: #ee5f5b;
  border: 1px solid #ee5f5b;
}

这适用于我的选择元素，但不适用于文本输入。知道我错过了什么吗？

Answer 1

如果我删除

，这对我有用

textarea,
input[type="text"]{
  border: 1px solid #cccccc;
}

一部分。我猜你的课程正在应用，但元素样式最后得到应用并最终获胜。

如果无法删除上述部分，您也可以尝试将.form_error更改为

.form_error {
  border-color: #ee5f5b;
  border: 1px solid #ee5f5b !important;
}

这将确保.form_error的样式胜过元素样式。它有点笨拙，但它会起作用（至少在Chrome中，我正在测试它）。

Answer 2

您可能还需要指定边框样式：

border: 1px solid #ee5f5b;

为什么我的文字输入边框在设置时没有显示？

2 个答案: