如何移除 onclick 输入边框 - CSS

在网页开发中，我们经常使用 onclick 属性添加点击事件。然而，对于某些网站而言，这可能导致出现一个不受欢迎的边框。幸运的是，使用 CSS，我们可以轻松移除这个边框。

1. 设置 outline

有些浏览器为了视觉效果会自动给被点击的元素添加一个蓝色的边框，这时你需要使用CSS将其去掉。

/* 取消元素的默认样式 */
*:focus {
  outline: none;
}

2. 设置 CSS 属性

除了使用 outline 属性，我们还可以设置以下的 CSS 属性来移除边框：

/* 取消元素的默认样式 */
*:focus {
  outline: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

3. 设置全局样式

如果你想一次性将所有 onclick 边框都去掉，可以在 global.css 中添加以下样式：

/* 取消所有元素的默认样式 */
*:focus {
  outline: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

4. 总结

使用 CSS 移除 onclick 输入边框只需要几行代码。我们可以使用 outline 属性或者其他的 CSS 属性来实现这个效果，同时也可以通过设置全局样式来一次性移除所有 onclick 边框。