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

淡淡的烟草味﹌ 2022-03-28 09:22 533阅读 0赞

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 的样式   
![这里写图片描述][70]

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

[70]: /images/20220328/55ea07c02e5d45f39b7b66b00d9c8e23.png

发表评论取消回复

表情：

评论列表（有 0 条评论，533人围观）

还没有评论，来说两句吧...

相关阅读

相关 css去掉原生input框的border属性

原生input框是自带border属性的，但有时候得去掉的话怎么办呢？这个时候可以把border设置为none 如果也要去掉点击时的光标效果则设置 input:

缺乏、安全感/ 2023年06月23日 07:57/ 0 赞/ 162 阅读

相关 element el-input 去掉边框

element样式还是蛮好的，只是有时候我们需要做一些调整，比如，el-input 的边框，官网是这样子的 ![watermark_type_ZmFuZ3poZW5naGVp

末蓝、/ 2022年12月22日 11:08/ 0 赞/ 401 阅读

相关 input修改placeholder样式、去掉点击时的边框样式

placeholder样式： input::-webkit-input-placeholder { font-size: 17px !importan

骑猪看日落/ 2022年12月04日 08:57/ 0 赞/ 215 阅读

相关去除android浏览器中a、input获得焦点时的高亮边框（outline）

若要去除它，通常的办法是： <table style="border-collapse:collapse; width:660px; margin:0px!important

左手的ㄟ右手/ 2022年08月21日 10:46/ 0 赞/ 204 阅读

相关 vim 颜色的修改（蓝色的注释很淡，看不清）

通过putty或者securecrt连到linux服务器，使用vi编辑\.php 或\.c文件时，蓝色的注释很淡，看不清，看起来很费眼效果如下 ![

刺骨的言语ヽ痛彻心扉/ 2022年07月14日 05:39/ 0 赞/ 488 阅读

相关 radio设置属性checked属性不生效

在jquery中，通过点击事件设置radio的checked属性不生效。 1、html <div id="weChatSignIn">

「爱情、让人受尽委屈。」/ 2022年06月04日 03:16/ 0 赞/ 445 阅读

相关 input 属性radio中设置checked 不生效

同一个页面中有许多地方都用到了单选按钮并设置了默认选中 , 结果在运行的时候发现单选按钮没有被默认选中由于是复制然后修改个别属性 ,然后直接使用的 , 所以name值忘记修

妖狐艹你老母/ 2022年06月01日 08:18/ 0 赞/ 181 阅读

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

1.常用的做法是使用outline:none 这个样式就可以了 <html> <head> <title> 测试

淡淡的烟草味﹌/ 2022年03月28日 09:22/ 0 赞/ 534 阅读

相关去除input输入框获得焦点以后的蓝色边框

![蓝色边框][20190527152543509.gif] 加css outline:none; 我还去除了input原来的黑色输入框，然后加了下划线

偏执的太偏执、/ 2022年01月25日 23:19/ 0 赞/ 420 阅读

相关 input输入框的class为form-control时，去除蓝色边框

input输入框的class为form-control时，去除蓝色边框 input.form-control:focus{ outline: non

喜欢ヅ旅行/ 2021年11月05日 14:16/ 0 赞/ 385 阅读