有人知道如何改变Bootstrap的输入:焦点吗?当你点击输入字段时显示的蓝色辉光?
当前回答
这将工作100%使用这个:
.form-control, .form-control:focus{
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
border: rgba(255, 255, 255, 0);
}
其他回答
你可以这样修改.form-control:focus颜色而不改变引导样式:
快速修复
.form-control:focus {
border-color: #28a745;
box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}
完整的解释
Find the bootstrapCDN version that you are using. E.g. for me right now is 4.3.1: https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css Search for the class you want to modify. E.g. .form-control:focus and copy the parameters that you want to modify into your css. In this case is border-color and box-shadow. Choose a color for the border-color. In this case I choose to pick up the same green the bootstrap uses for their .btn-success class, by searching for that particular class in the bootstrap.css page mentioned in the step 1. Convert the color you have picked to RGB and add that to the box-shadow parameter without altering the fourth RGBA parameter (0.25) that bootstrap has for transparency.
实际上，在Bootstrap 4.0.0-Beta(截至2017年10月)中，input元素没有被input[type="text"]引用，输入元素的所有Bootstrap 4属性实际上都是基于表单的。
它使用。form-control:focus样式。用于突出显示输入元素的“on focus”的适当代码如下:
.form-control:focus {
color: #495057;
background-color: #fff;
border-color: #80bdff;
outline: none;
}
很容易实现，只需要改变border-color属性。
为body标签添加一个Id。在你自己的Css(不是bootstrap.css)中指向新的body ID，并设置你想要覆盖的类或标记以及新的属性。 现在您可以随时更新引导，而不会丢失您的更改。
html文件:
<body id="bootstrap-overrides">
css文件:
#bootstrap-overrides input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="url"]:focus, textarea:focus{
border-color: red;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(126, 239, 104, 0.6);
outline: 0 none;
}
请参见:覆盖引导css的最佳方法
我降落到这个线程寻找方法禁用辉光完全。许多答案对我来说太复杂了。为了简单的解决方案，我只需要一行CSS如下。
input, textarea, button {outline: none; }
要禁用蓝色辉光(但你可以修改代码来改变颜色，大小等)，添加这个到你的css:
.search-form input[type="search"] {
-webkit-box-shadow: none;
outline: -webkit-focus-ring-color auto 0px;
}
下面是一个屏幕截图，展示了之前和之后的效果:
