html - 如何在不使用 !important 的情况下自定义 twitter bootstrap 的各种输入大小？

Question

Bootstrap 的输入大小仅按宽度扩展，而按钮按高度和字体大小扩展。 (见图)我正在尝试自定义输入以按高度和字体大小进行扩展。 (注意:他们正在为下一个版本修复这个问题，但我等不及了)

到目前为止，我只能通过使用 !important hack 来覆盖输入 css 来实现这一点。我想不惜一切代价避免使用 !important，因为这是糟糕的做法。

目前，这是我用于扩展.input-large 高度的代码。当我删除 !important 时它不起作用。我认为这是因为输入的优先级高于类(我觉得这很愚蠢，但如果我错了请纠正我)。

.input-large {
width: 210px;
height: 44px !important;
margin-bottom: 10px !important;
line-height: 30px !important;
padding: 11px 19px !important;
font-size: 17.5px !important;
}

有什么方法可以在不删除默认输入样式和不声明 !important 的情况下实现这一点？

这是一个 fiddle :http://jsfiddle.net/xryQK/

Answer 1

而不是使用 !important ，您可以使用 attribute selector 这将覆盖默认值，因为它比简单地使用 class 更具体。 .特异性概念不好？引用this文章。

要计算选择器的特异性，您可以使用 this网站。

^[1] 使用 class[attr=class]

.input-large[class="input-large"] {
    width: 400px;
}

或

^[2] 使用 tag[attr=class]

input[class="input-large"] {
    width: 400px;
}

并使用 !important如果你在正确的地方使用它，这并不是一个糟糕的做法。

---

请注意上面的选择器，^[1] 将使所有元素 width至 400px有一个class的 input-large在选择器 ^[2] 的情况下，它将设置 width至 400px对于所有input 具有 class 的元素的 input-large ，所以如果你愿意，你可以调用多个类即.class.class在 input标记并使用下面的选择器..

.input-large.input-large-altered {
    width: 400px;
}

所以这将选择设置了这两个类的任何元素，如果您想要更具体，并且只想为 input type="text" 设置比你总能写出更具体的选择器，比如

input[type="text"].input-large.input-large-altered {
   width: 400px;
}

所以上面的将仅定位到input type 的元素属性持有 value的 text AND 同时拥有这两个类，即 .input-large .input-large-altered

Demo

Demo 2

Demo 3 (多类)