css - 将自定义 css 应用于 Bootstrap 输入类型文本

Question

我花了一个小时尝试将我的 css 应用于表单内文本类型的 Bootstrap 输入。这是我的代码:

<form>
  <div class="form-group">
    <input type="text" name="username" value="" id="username" class="form-control" />
  </div>
</form>

input [type=text] {
  background-color: red !important;
}

奇怪的是，如果我删除 [type=text] 部分，那么一切正常。

JSFiddle

Answer 1

您必须删除 input 和 [type=text] 之间的空格:

input[type=text] {
  background-color: red !important;
}

<input type="text"/>
<input type="password"/>