input 使用outline属性去掉淡蓝色边框不生效
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 的样式被覆盖了
input 使用outline属性去掉淡蓝色边框不生效相关推荐
- 去掉选中div后出现的高亮淡蓝色边框
一般是textarea.input.select等表单控件在active状态下默认会有outline,div默认不会有 但是当你用div来做点击时,可能就会出现高亮淡蓝色边框 你可以设置 <st ...
- 【杂谈】excel列表创建后，怎么删除蓝色边框线？
在excel中,创建excel列表后,会出现蓝色边框线.... 可以用以下方法来去掉这个蓝色边框: 在列表区域内右击任意一个单元格,选择"列表",再选择 "转换为区域&q ...
- input 获取焦点 蓝色边框 去掉 outline
这是一个系列,记录我前端开发常用的代码,小常识,有些是参考网上代码,(讲的可能有点烂,求不要打脸,嘤嘤嘤~~)送给那些需要的人.可以相互交流,喜欢的加我吧. Wx: Lxp911221 最近发生了一些 ...
- 去掉input框的点击出现的蓝色边框
1.input{ outline:none; } 2.input:focus{ outline:none; } 3.经测试IE8,9,10,11下outline:none;点击有蓝色上边框,borde ...
- antd input框获取焦点点击输入历史保存的值后，背景颜色变成淡蓝色解决方法，输入框获取焦点后边框会有一圈淡蓝色光边
input:-internal-autofill-previewed, input:-internal-autofill-selected {// -webkit-text-fill-color: # ...
- html input边线,input边框，轮廓outline属性
昨天在一个技术群里问关于input表单的问题,修改其边框兼容等问题,明明记得以前修改的时候IE6是不兼容的不知道,怎么的,现在写了一下都没事了,心里一阵的郁闷啊,现在记住之前写的样式,要是以后在遇到, ...
- input获取焦点边框 outline属性
1. 清除input获取焦点时默认的边框 outline-style: none; <!DOCTYPE html> <html lang="en"& ...
- input去除蓝色边框
input标签在使用的时候会有边框样式.当input聚焦的时候又会显示出一个蓝色边框. 很多时候我们并不需要这种默认样式的边框,就需要去除边框. 给需要去除的标签添加css样式: border: no ...
- bootstrap~去除input选中时的蓝色边框线
1.去除input边框 .form-control{border:0;webkit-box-shadow:none;box-shadow:none; } 2.去除input选中时的蓝色边框线 .for ...
最新文章
- Coinbase调查发现，BCH上市前没有发生不当交易
- 用Jsp来实现文件下载功能的几种方式
- 【杂谈】有三AI开源项目中的代码和教程，来学习的粉丝们应该要知道了
- Android通用开发笔记和高性能安卓开发框架源码
- java 请求响应_java http接口请求响应 request response
- paginatorhelper ajax,Bootstrap Paginator+PageHelper实现分页效果_蓝瞳_前端开发者
- Tensorflow GAN对抗生成网络实战
- SAP License：MM自动过账科目特殊库存杂谈
- 详解Java动态代理机制
- 跨境电商ERP系统有几大功能？
- goquery php,golang：Goquery简单爬虫实例
- oracle12542,Oracle 11Gr1监听报错 TNS-12542 12560 00512
- android 蓝牙耳机插拔,一种插拔式蓝牙耳机的制作方法
- MATLAB中神经网络工具箱的使用
- Spring整合axis2
- codeforces 1635E-Cars （二分图染色+拓扑排序）
- 标识符的命名和使用 规则
- 2007年大连软件出口全国第三 荣获中国软件出口（外包）政府推进奖
- 使用TP5开发微信服务商支付
- 网络电缆被拔出——简单是否为网卡损坏