css删除徽标周围的虚线

Question

我有以下html：

<div class='navbar'>
    <div class='home'>
       <button class="btn" onclick="location.href='#';"><i class="fa fa-home">
    </i></button>
...

使用此CSS：

.navbar.home.btn {
font-size: 20px;    
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
outline: none;
}

.navbar a:hover, #dropdwn:hover #dropdwn_btn, .navbar .home:hover .btn{
background-color: red;
transition: 0.5s;
}

问题：当我关注btn时，即使我这样做，它周围也有一条小虚线

.navbar.home.btn:focus {
outline: none;
}

它仍然显示，我如何摆脱它？

当聚焦在所附图片中时，您可以看到按钮及其周围的虚线。

提前谢谢。

Answer 1

尝试icon

   .navbar.home.btn:focus i{
    border: none;
    }

.navbar.home.btn {
font-size: 20px;    
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
outline: none;
}

.navbar a:hover, #dropdwn:hover #dropdwn_btn, .navbar .home:hover .btn{
background-color: red;
transition: 0.5s;
}
.btn:focus i{
    outline: none;
    border:none;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">


<div class='navbar'>
    <div class='home'>
       <button class="btn" onclick="location.href='#';"><i class="fa fa-home">
    </i></button>

Answer 2

我无法通过使用您的代码来重现虚线。

必须有另一个导致此问题的CSS规则，但是如果看不到您的所有代码，就无法知道。您可以尝试依次禁用CSS文件以查明是什么原因吗？