Question

我正在使用带有引导程序的表单，它需要在每个输入上使用“表单控制”类。我希望一个只读输入改变到另一个字段的错误输入的“btn-danger”类。但是，当我将“btn-danger”类添加到输入时，除了悬停在它上面时，它不会覆盖设置背景颜色的“表单控件”。删除“form-control”类会导致输入更改为错误的大小。知道为什么没有覆盖背景颜色？类应该级联，对吧？

例如，如果我有以下输入：

<input id="test" class="form-control" readonly>

然后这不应该像它应该的那样：

$('#test').addClass("btn btn-danger");

编辑：

这对于只读按钮的“表单控制”样式来说似乎有问题。当我删除readonly标签时一切正常。我认为readonly属性强制执行灰色背景。我怎么能绕过这个？

Answer 1

parent

这应该在测试中引用如下：

srcdoc

如果出于某种原因无效，请发布更多代码，以便我们了解更多问题以及如何解决问题。

更新：尝试此操作以覆盖readonly属性的样式。

$(#test).addClass("btn btn-danger");

Answer 2

好的，我明白了。默认情况下，属性样式会覆盖类样式，因此＆＃34; readonly＆＃34;由于以下代码，无论添加什么类，按钮都是灰色的：

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
  background-color: #eee;
  opacity: 1;
}

然而，＆＃34;禁用＆＃34;没有相同的行为，因为＆＃34; .btn-danger [禁用]＆＃34; class是明确定义的：

btn-danger.disabled,
.btn-danger[disabled],
fieldset[disabled] .btn-danger,
.btn-danger.disabled:hover,
.btn-danger[disabled]:hover,
fieldset[disabled] .btn-danger:hover,
.btn-danger.disabled:focus,
.btn-danger[disabled]:focus,
fieldset[disabled] .btn-danger:focus,
.btn-danger.disabled.focus,
.btn-danger[disabled].focus,
fieldset[disabled] .btn-danger.focus,
.btn-danger.disabled:active,
.btn-danger[disabled]:active,
fieldset[disabled] .btn-danger:active,
.btn-danger.disabled.active,
.btn-danger[disabled].active,
fieldset[disabled] .btn-danger.active {
  background-color: #d9534f;
  border-color: #d43f3a;
}

解决方案是为＆＃34; .btn-danger [readonly]＆＃34;添加类似的样式。

Bootstrap“btn-danger”类不会覆盖“表单控制”类

编辑：

2 个答案: