如何删除 Chrome 自定义按钮中烦人的蓝色边框？

摆脱 Chrome 自定义按钮上烦人的蓝色边框

使用 CSS 创建自定义样式的按钮时，遇到这样的情况可能会令人沮丧在 Chrome 中点击它们时出现意外的蓝色边框。尽管将边框设置为“无”，但该轮廓仍然存在，可能会损害用户体验。

删除此边框的一种常见方法是使用“button:active {outline:none}”或“button:焦点{大纲：无}。”然而，这些可能并不总是有效。

推荐的解决方案

虽然不建议消除浏览器边框，因为它会破坏可访问性，但这里有一个解决方案，应该解决问题：

button:focus {
  outline: 0;
}

通过将焦点上的轮廓设置为“0”，Chrome 将不再显示蓝色边框，按预期保留自定义按钮。

演示

查看此更新的 CSS 片段和 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.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;
}

以上是如何删除 Chrome 自定义按钮中烦人的蓝色边框？的详细内容。更多信息请关注PHP中文网其他相关文章！