有人知道如何改变Bootstrap的输入:焦点吗?当你点击输入字段时显示的蓝色辉光?
当前回答
我不能解决这个与CSS。似乎bootstrap是得到最后的发言权,即使我有网站。css后bootstrap。无论如何,这对我很有用。
$(document).ready(function () {
var elements = document.getElementsByClassName("form-control");
Array.from(elements).forEach(function () {
this.addEventListener("click", cbChange, false);
})
});
function cbChange(event) {
var ele = event.target;
var obj = document.getElementById(ele.id);
obj.style.borderColor = "lightgrey";
}
后来我发现这在css工作。显然只有表单控件
.form-control.focus, .form-control:focus {
border-color: gainsboro;
}
这里是Chrome开发工具之前和之后的照片。注意对焦和不对焦边界颜色的区别。另一方面,这对按钮不起作用。与按钮。与按钮,你必须改变轮廓属性为none。
其他回答
如果您正在使用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.css中修改了以下css条目
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: rgba(126, 239, 104, 0.8);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(126, 239, 104, 0.6);
outline: 0 none;
}
根据@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;
如果你想完全移除阴影,添加类shadow-none到你的输入元素中。
这应该有助于去除它! 输入[type = text] { 边界:没有; } 输入[type = text]:focus { 边界:没有; 不必:没有; }
推荐文章
- 使伸缩项目正确浮动
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换,锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?