更改 Bootstrap 输入焦点蓝色发光

Question

有谁知道如何更改 Bootstrap 的 input:focus ？单击 input 字段时出现的蓝色光晕？

原文由 felix001 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

最后我更改了 bootstrap.css 中的以下 css 条目

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
  border-color: rgba(126, 239, 104, 0.8);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(126, 239, 104, 0.6);
  outline: 0 none;
}

原文由 felix001 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以使用 .form-control 选择器匹配所有输入。例如更改为红色：

 .form-control:focus {
  border-color: #FF0000;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6);
}

把它放在你的自定义 css 文件中，并在 bootstrap.css 之后加载它。它将应用于所有输入，包括文本区域、选择等…

原文由 igaster 发布，翻译遵循 CC BY-SA 4.0 许可协议