如何在按钮单击时删除边框 - CSS

在CSS中，我们可以使用伪类选择器 :focus 来选择元素在获得焦点时的样式。通常情况下，元素获得焦点时会出现边框。但有些情况下，我们希望在元素被点击后，移除该边框。

以下是如何在按钮单击时删除边框的CSS代码片段：

button:focus {
  outline: none;
}

以上代码会在按钮获得焦点时移除其默认的外发光边框。

可能有人会担心这种方式会对辅助功能有负面影响，因为当用户使用键盘浏览网站时，焦点移动到按钮上时，没有边框将使这个按钮变得不易辨认。我们可以使用其他元素的样式来代替元素本身的边框，以此来满足辅助功能的需求。

例如，我们可以在按钮中嵌套 span 元素，并为该元素设置边框：

<button>
  <span class="btn-text">我的按钮</span>
</button>

button:focus .btn-text {
  outline: none;
  border: 2px solid #333;
}

以上代码在按钮获得焦点时，移除了按钮文本的默认外发光边框，并替换成了一个2像素宽的黑色实线边框。

在实际开发中，我们可以根据需求自定义边框的样式，以此来满足设计师提供给我们的需要在元素获得焦点时取消边框的需求。