有人知道如何改变Bootstrap的输入:焦点吗?当你点击输入字段时显示的蓝色辉光?


当前回答

你可以使用.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之后加载它。它将适用于所有输入,包括文本区域,选择等…

其他回答

对于Bootstrap v4.0.0 beta版本,你需要将以下内容添加到覆盖Bootstrap的样式表中(可以在CDN/local链接后添加到Bootstrap v4.0.0 beta版,也可以在样式中添加!

.form-control:focus {
  border-color: #6265e4 !important;
  box-shadow: 0 0 5px rgba(98, 101, 228, 1) !important;
}

将box-shadow上的border-color和rgba替换为你想要的颜色样式*。

你可以使用.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之后加载它。它将适用于所有输入,包括文本区域,选择等…

在Bootstrap 3.3.7中,你可以在定制器的Forms部分更改@input-border-focus值:

简单的一个

要移除它:

.form-control, .btn {
    box-shadow: none !important;
    outline: none !important;
}

来改变它

.form-control, .btn {
    box-shadow: new-value !important;
    outline: new-value !important;
}

如果你想让Chrome显示平台默认的“黄色”轮廓,这里有一些改变。

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: none;
    box-shadow: none;
    -webkit-box-shadow: none;
    outline: -webkit-focus-ring-color auto 5px;
}