有人知道如何改变Bootstrap的输入:焦点吗?当你点击输入字段时显示的蓝色辉光?
当前回答
如果你想完全移除阴影,添加类shadow-none到你的输入元素中。
其他回答
你可以使用.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。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);
}
}
根据@wasinger上面的回复,在Bootstrap 4.5中,我不仅要覆盖颜色变量,还要覆盖盒影本身。
$input-focus-width: .2rem !default;
$input-focus-color: rgba($YOUR_COLOR, .25) !default;
$input-focus-border-color: rgba($YOUR_COLOR, .5) !default;
$input-focus-box-shadow: 0 0 0 $input-focus-width $input-focus-color !default;
简单的一个
要移除它:
.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;
}
推荐文章
- 在输入type="number"时禁用webkit的旋转按钮?
- 如何在另一个元素之后添加一个元素?
- 我如何有效地解析HTML与Java?
- “ ”和“”有什么区别?
- 如何使用JavaScript代码获得浏览器宽度?
- 防止滚动条增加到Chrome页面的宽度
- 使用图像而不是单选按钮
- 将RGB转换为白色的RGBA
- 我可以嵌套一个<按钮>元素内< >使用HTML5?
- 设置TextView文本从html格式的字符串资源在XML
- 为什么我的球(物体)没有缩小/消失?
- Twitter Bootstrap 3 Sticky Footer
- CSS在特定的“内联块”项之前/之后换行
- 很好的初学者教程socket.io?
- 内嵌CSS有什么不好?