有人知道如何改变Bootstrap的输入:焦点吗?当你点击输入字段时显示的蓝色辉光?
当前回答
为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的最佳方法
其他回答
实际上,在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属性。
在Bootstrap 4中,如果你自己编译SASS,你可以改变下面的变量来控制焦点阴影的样式:
$input-btn-focus-width: .2rem !default;
$input-btn-focus-color: rgba($component-active-bg, .25) !default;
$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default;
注意:从Bootstrap 4.1开始,$input-btn-focus-color和$input-btn-focus-box-shadow变量只用于输入元素,而不是按钮。按钮的焦点阴影被硬编码为box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);,所以你只能通过$input-btn-focus-width变量来控制阴影宽度。
如果您正在使用Bootstrap 3。X,你现在可以用新的@input-border-focus变量改变颜色。
有关更多信息和警告,请参阅commit。
在_variables。SCSS更新@input-border-focus。
要修改这个辉光的大小/其他部分,请修改mixins/_forms.scss
@mixin form-control-focus($color: $input-border-focus) {
$color-rgba: rgba(red($color), green($color), blue($color), .6);
&:focus {
border-color: $color;
outline: 0;
@include box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 4px $color-rgba);
}
}
试试这个,它和bootstrap的输入是一样的…
input:focus{
color: #212529;
background-color: #FFF;
border-color: #86B7FE;
outline: 0;
box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
}
这将工作100%使用这个:
.form-control, .form-control:focus{
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
border: rgba(255, 255, 255, 0);
}
推荐文章
- 使伸缩项目正确浮动
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换,锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?