1

我和一个朋友正在构建一个 jQuery Form Creator/Validator 插件，我们也在使用 twitter bootstrap，因为它有漂亮的 css 元素！

当用户单击提交按钮时，我们希望将一个类（使输入框阴影变为红色）应用于所需的表单元素。

这适用于除文本之外的所有表单元素。显然 twitter bootstrap css 在某种程度上与类冲突。该类被添加到元素中，但没有任何反应。

如果有人可以给我们一个提示，我们将不胜感激！

这是我们正在构建的代码（当然这是一个简单的版本）：http: //jsfiddle.net/rdenadai/Hr9Gj/5/

谢谢！！

4

2 回答 2

2

Bootstrap 的 CSS 规则优先于您的，因为它们更具体，特别是input[type="text"]规则。要覆盖它们，请将!important声明添加到您的样式中：

.required {
    border:1px solid rgba(196, 39, 39, 0.3) !important;
    -webkit-box-shadow: 0px 0px 5px 2px rgba(196, 39, 39, 0.3) !important;
    box-shadow: 0px 0px 5px 2px rgba(196, 39, 39, 0.3) !important;
}
​

演示

于 2012-08-23T20:11:27.260 回答
0

您的 CSS 没有足够具体地针对输入字段，导致 Bootstrap 覆盖它。试试这个：

input[type="text"].required {
    border:1px solid rgba(196, 39, 39, 0.3);
    -webkit-box-shadow: 0px 0px 5px 2px rgba(196, 39, 39, 0.3);
    box-shadow: 0px 0px 5px 2px rgba(196, 39, 39, 0.3);
}
于 2012-08-24T10:16:32.560 回答