改变引导输入焦点蓝色发光

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

当前回答

你可以这样修改.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.

2019-02-28 12:19:08

其他回答

对于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替换为你想要的颜色样式*。

2018-01-02 18:39:54

对于焦点前的输入边框。你可以指定你想要使用的最喜欢的颜色和其他css，如填充等


.input {
    padding: 6px 190px 6px 15px;
    outline: #2a65ea auto 105px ;
}

当我们关注输入时。你可以指定你喜欢的颜色轮廓


.input:focus{
    box-shadow: none;
    border-color: none;
    outline: lightgreen auto 5px ;
}

2020-04-20 11:01:21

这应该有助于去除它! 输入[type = text] { 边界:没有; ｝输入[type = text]:focus { 边界:没有; 不必:没有; ｝

2021-07-28 11:40:31

实际上，在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属性。

2017-10-15 02:04:00

为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的最佳方法

2016-03-30 14:00:26

改变引导输入焦点蓝色发光

推荐文章

最新文章

标签