按钮周围的蓝色突出显示答案

【问题标题】：Blue highlight around button按钮周围的蓝色突出显示
【发布时间】：2017-10-01 09:38:45
【问题描述】：

我正在为我的按钮使用 CSS3。我注意到，每当我单击任何按钮时，按钮周围都会出现一个矩形蓝色高亮显示。不知道有没有什么办法可以取下来。这是我的代码：

    .navbar-custom {
        background-color:#000000;
        color:#ffffff;
        border-radius:0;
        height:100px;
        }

.btn {
  box-sizing: border-box;
  appearance: none;
  background-color: transparent;
  border: 2px solid #e74c3c;
  border-radius: 0.6em;
  color: #e74c3c;
  cursor: pointer;
  display: flex;
  align-self: center;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  margin: 20px;
  padding: 1.2em 2.8em;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
}
.btn:hover, .btn:focus {
  color: #fff;
  outline: 0;
}
.sixth {
  border-radius: 3em;
  border-color: #ec6800;
  color: #FFF;
  background-image: linear-gradient(to bottom, transparent 50%, #2ecc71 50%);
  background-position: 0 0;
  background-size: 200%;
  transition: background 150ms ease-in-out, color 150ms ease-in-out;
}

</style>

</head>

<body>

     <nav class="navbar navbar-custom">
        <ul class="nav navbar-nav navbar-right">
           <button class="btn sixth">SIGN UP</button>
               </ul> </nav>          
</body>

【问题讨论】：

你去：stackoverflow.com/a/25298082/2936363
Remove blue border from css custom-styled button in Chrome的可能重复

标签： html css

【解决方案1】：

按钮已经有属性outline: 0; 应该处理这个，必须有一些CSS覆盖这个属性，你使用outline:none或outline:0，两者基本上做同样的事情，参考here所以修改属性为。

之前：

.btn:hover, .btn:focus {
  color: #fff;
  outline: 0;
}

之后：

.btn:focus {
  color: #fff;
  outline: 0 !important;
}

.navbar-custom {
  background-color: #000000;
  color: #ffffff;
  border-radius: 0;
  height: 100px;
}

.btn {
  box-sizing: border-box;
  appearance: none;
  background-color: transparent;
  border: 2px solid #e74c3c;
  border-radius: 0.6em;
  color: #e74c3c;
  cursor: pointer;
  display: flex;
  align-self: center;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  margin: 20px;
  padding: 1.2em 2.8em;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
}

.btn:hover,
.btn:focus {
  color: #fff;
  outline: none !important;
}

.sixth {
  border-radius: 3em;
  border-color: #ec6800;
  color: #FFF;
  background-image: linear-gradient(to bottom, transparent 50%, #2ecc71 50%);
  background-position: 0 0;
  background-size: 200%;
  transition: background 150ms ease-in-out, color 150ms ease-in-out;
}

<nav class="navbar navbar-custom">
  <ul class="nav navbar-nav navbar-right">
    <button class="btn sixth">SIGN UP</button>
  </ul>
</nav>

【讨论】：

【解决方案2】：

Box-shadow 在某些情况下会有所帮助

.btn:focus,.btn:active {
   outline: none !important;
   box-shadow: none !important;
}

【讨论】：