按钮焦点上的 CSS 自定义轮廓

Question

我的 HTML 结构如下：

<li>
  <button/>
</li>

我正在尝试在按钮获得焦点时为其创建轮廓，但我有以下规范：

1. 它不能给封闭的<li>添加任何宽度
2. 我不想勾勒按钮的底部，只有左/右/顶部

关于如何解决这个问题有什么建议吗？谢谢！

Answer 1

您可以使用:focus pseudo-class 和box-shadow：

button:focus {
  box-shadow: rgb(0 0 0) 0 -2px 5px 1px;
}

<li>
  <button>click to show outline</button>
</li>

Answer 2

轮廓只能从元素的四个侧面出现，因此请尝试删除默认轮廓，然后添加框阴影以获得理想的效果。

button:focus {
  outline: none; /* to remove default outline */
  box-shadow: 0 -1px 0 1px red; /* use box-shadow to emulate outlining */
}