您的位置：首页 > 其它

input 使用outline属性去掉淡蓝色边框不生效

2018-02-26 11:31 369 查看
1.常用的做法是使用outline:none 这个样式就可以了

<html>
<head>
<title>
测试
</title>
<style type="text/css">
input{
outline: none;
}
</style>
</head>
<body>
<input />
</body>
</html>


效果很明显



2.问题：在bootstrap 环境中使用的时候，input 加上form-control的class ，outline 没有效果

<html>
<head>
<title>
测试
</title>
<link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css">
<style type="text/css">
input{
outline: none;
}
/*没有作用*/
input:focus{
outline: none;
}
</style>
</head>
<body>
<div style="padding:10px;">
<input class="form-control" />
</div>
</body>
</html>




查看focus 的调试会发现原因，.form-control：focus 默认给input 的边框加上了颜色



解决办法：覆盖form-control 的样式



再次刷新后查看效果，获取焦点时form-control 的样式被覆盖了

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  outline Input去掉蓝色边框
相关文章推荐
新的分享
章节导航