从Chrome中的css自定义样式按钮中删除蓝色边框

Question

问

从Chrome中的css自定义样式按钮中删除蓝色边框

mobiledu2502870557 发布于 2023-02-13 12:40

我正在开发一个网页,我想要自定义样式的



        
        11 个回答
        
                        
                等待!这个丑陋的轮廓有一个原因!

在删除丑陋的蓝色轮廓之前,您可能需要考虑可访问性.默认情况下,蓝色轮廓放在可聚焦元素上.这样,具有辅助功能问题的用户可以通过选项卡来关注该按钮.一些用户没有使用鼠标的运动技能,并且必须仅使用键盘(或一些其他输入设备)进行计算机交互.当您移除蓝色轮廓时,不再有关于哪个元素聚焦的可视指示符.如果要删除蓝色轮廓,则应将其替换为按钮聚焦的其他类型的可视指示.

可能的解决方案:聚焦时使按钮变暗

对于下面的示例,Chrome的蓝色轮廓首先通过使用删除 button:focus { outline:0 !important; }

以下是您正常显示的基本Bootstrap按钮:


以下是获得焦点时的按钮:


按下按钮时按下按钮:


如您所见,按钮在获得焦点时会稍微变暗.就个人而言,我建议使聚焦按钮更暗,以便聚焦状态和按钮的正常状态之间存在非常显着的差异.

它不仅适用于残疾用户

让您的网站更易于访问是一件经常被忽视的事情,但可以帮助您在网站上创造更高效的体验.有许多普通用户使用键盘命令来浏览网站以便将手放在键盘上.

        
                
                    2023-02-13 12:40  回答
                       胡宸宸
                
            
                        
                只需将此添加到您的CSS:

button:focus {outline:0;}


看看它或JSFiddle:http://jsfiddle.net/u4pXu/

或者在这个片段中:



button.launch {
background-color: #F9A300;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}

button.launch:hover {
cursor: pointer;
background-color: #FABD44;
}

button.launch {
background-color: #F9A300;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}

button.launch:hover {
cursor: pointer;
background-color: #FABD44;
}

button.change {
background-color: #F88F00;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}

button.change:hover {
cursor: pointer;
background-color: #F89900;
}

button:active {
outline: none;
border: none;
}

button:focus {outline:0;}

<button class="launch">Launch with these ads</button> 
<button class="change">Change</button>


                
                    2023-02-13 12:40  回答
                       手机用户2602928177
                
            

                        
                我只是通过选择all并将outline:none应用于所有内容,从页面中的所有标签中删除轮廓:)

*:focus {outline:none}


正如bagofcole所提到的,你可能还需要添加!important,所以样式将如下所示:

*:focus {outline:none !important}

        
                
                    2023-02-13 12:41  回答
                       
                
            
                        
                在我的这个问题的例子中,我必须指定 box-shadow: none

button:focus {
  outline:none;
  box-shadow: none;
}

        
                
                    2023-02-13 12:41  回答
                       是远航呀
                
            
                        
                删除outline对于可访问性来说非常糟糕!理想情况下,只有当用户打算使用键盘时才会显示聚焦环.

使用:焦点可见.它目前是一个W3C提议,用于使用CSS设置仅键盘焦点的样式.在主流浏览器支持之前,您可以使用这种强大的polyfill.

/* Remove outline for non-keyboard :focus */
*:focus:not(.focus-visible) {
  outline: none;
}

/* Optional: Customize .focus-visible */
.focus-visible {
  outline-color: lightgreen;
}


我还写了一篇更详细的文章,以防您需要更多信息.

        
                
                    2023-02-13 12:41  回答
                       霍任芳
                
            
                        
                不要忘记!important声明,以获得更好的结果

button:focus {outline:0 !important;}


无论CSS规则中出现哪个规则,都将始终应用具有!important属性的规则.

        
                
                    2023-02-13 12:41  回答
                       鄢都浪子_562
                
            
                        
                对于这个问题：



用这个：

   *{
         -webkit-tap-highlight-color: rgba(0,0,0,0);
         -webkit-tap-highlight-color: transparent; /* For some Androids */
    }


结果：


        
                
                    2023-02-13 12:43  回答
                       你们聊交给我
                
            
                        
                这对我有用：

button:focus {
    box-shadow:none;
}

        
                
                    2023-02-13 12:43  回答
                       黄初伦伟彦宜婷
                
            
                        
                对于任何使用Bootstrap并遇到此问题的人,他们使用:active:focus以及just:active和:focus所以你需要:

element:active:focus {
    outline: 0;
}


希望有人能节省一些时间来解决这个问题,让我有点疑惑,想知道为什么这么简单的事情无法正常工作.

        
                
                    2023-02-13 12:43  回答
                       fanhua1
                
            
                        
                在CSS文件中添加它.

*{
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

        
                
                    2023-02-13 12:43  回答
                       MINT米田
                
            
                        
                使用这个:

:active {
    outline:none;
}


或者如果这不起作用: 

:active {
   outline:none !important;
}


这对我有用(至少FF和Chrome).只需定位:focus状态,而不是定位状态,:active当用户点击链接时,这将删除浏览器中美学上突兀的突出显示.但是当有残障的用户选项卡或通过页面切换标签时,它仍将保留焦点状态.双方都很开心.:)

        

                
                    2023-02-13 12:46  回答
                       just_roshinn5
                
            

                    

    

    
    
        撰写答案
        
            
                
                    回答问题...