<分区>
<分区>
如何使用 Bootstrap 单独更改焦点边框颜色？ 默认为蓝色，但我需要四种不同的边框颜色。
<div class="row">
<input type="text" class="form-control" placeholder="Color 1">
<input type="text" class="form-control" placeholder="Color 2">
<input type="text" class="form-control" placeholder="Color 3">
<input type="text" class="form-control" placeholder="Color 4">
</div>
我已经尝试创建自己的 css 样式，但它不起作用。像这样:
.color1, input:focus{ border-color: #DDD;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #AAA;
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #AAA;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #AAA;};
然后
<input type="text" class="color1 form-control" placeholder="Color 1">
但继续使用原始 Bootstrap 。
我尝试更改 bootstrap.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(82, 168, 236, 0.8);
outline: 0;
outline: thin dotted \9;
它适用于所有相同颜色的输入。但我需要不同的颜色。
最佳答案
在您自己的 CSS 中覆盖此选择器:https://github.com/twbs/bootstrap/commit/73c048578dfce7c6d4e8c9d4fe6c6bd22b2ff9b2
.form-control:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
关于html - Bootstrap 独立输入焦点颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34377922/