如何覆盖jQuery验证文本颜色?

时间:2012-04-11 16:50:39

标签: css jquery-validate

我使用jQuery Validate插件来突出显示错误。它用红色替换文本的颜色,除了一个 - .help-block之外的所有元素都可以,它应该保持蓝色。

这是没有错误的代码:

<div class="control-group">
    <label class="control-label" for="place-of-birth">Place of birth</label>
    <div class="controls">
      <p class="help-block">Please input place of birth below, 2-80 symbols</p>
      <input type="text" class="input-xlarge" id="place-of-birth" name="place-of-birth" minlength="2" maxlength="80" autocomplete="off">
    </div>
</div>

以下是错误消息:

<div class="control-group error"> <!-- STYLE IS CHANGED HERE -->
    <label class="control-label" for="place-of-birth">Place of birth</label>
    <div class="controls">
      <p class="help-block">Please input place of birth below, 2-80 symbols</p>
      <input type="text" class="input-xlarge" id="place-of-birth" name="place-of-birth" minlength="2" maxlength="80" autocomplete="off">
      <div class="help-block" generated="true" for="place-of-birth">Please enter at least 2 characters.</div> <!-- THIS LINE IS ADDED -->
    </div>
</div>

我试图用以下CSS覆盖它:

.control-group .error .help-block { color: blue; }

但它没有帮助。 Demo

这里有什么问题?

2 个答案:

答案 0 :(得分:1)

像这样改变:

.control-group.error .help-block { color: blue; }

如果一个元素上有两个类,则选择器之间不能有空格。如果有空格,则表示此类属于子标记。

答案 1 :(得分:0)

CSS规则是:

.control-group.error .input-prepend .add-on, .control-group.error .input-append .add-on {
  color: #B94A48;
  background-color: #F2DEDE;
  border-color: #B94A48;
}

修改bootstrap.css文件中的这些值或自行制作。