input 使用outline属性去掉淡蓝色边框不生效
2018-02-26 11:31
417 查看
1.常用的做法是使用outline:none 这个样式就可以了
效果很明显
2.问题:在bootstrap 环境中使用的时候,input 加上form-control的class ,outline 没有效果
查看focus 的调试会发现原因,.form-control:focus 默认给input 的边框加上了颜色
解决办法:覆盖form-control 的样式
再次刷新后查看效果,获取焦点时form-control 的样式被覆盖了
<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:none;和outline:medium;去掉input边框蓝色边框线完全没效果原因
- maxLength要与inputType属性同时使用才会生效
- 去掉input边框的原有属性和去掉a标签样式的方法
- 解决css中input输入框点击时去掉外边框方法【outline:medium;】
- 【angular】组件:@Input() @Output() 输入属性和输出属性以及中间人模式的使用 (一)
- 【angular】组件:@Input() @Output() 输入属性和输出属性以及中间人模式的使用 (一)
- Html中input标签中的disabled属性要放在标签的最后面,否则结合隐藏标签使用时出错。
- 去掉textArea和input的边框
- input[type='submit']input[type='button']button等按钮在低版本的IE下面,去掉黑色边框的问题
- 去掉超链接虚线框--去掉chrome浏览器中input或textarea在得到焦点时出现黄色边框和取消可以拖动大小
- android:windowSoftInputMode属性使用
- 去掉点击链接时周围的虚线框outline属性
- 【解决方案】去掉谷歌浏览器获取焦点时默认的input、textarea的边框和背景
- 去掉input边框
- 在webapp上使用input:file, 指定capture属性调用默许相机,摄像,录音功能
- 【angular】组件:@Input() @Output() 输入属性和输出属性以及中间人模式的使用 (一)
- html input标签的type属性的使用
- input属性不要边框
- android:windowSoftInputMode属性使用
- React Native的TextInput组件去掉下划线和使用背景图片