按钮焦点上的 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 */
}