css focus-visible

CSS的:focus-visible伪类是用来表示元素的聚焦行为是鼠标触发还是键盘触发的。在目前版本的Chrome浏览器下，浏览器认为键盘访问触发的元素聚焦才是:focus-visible所表示的聚焦。如果我们希望去除鼠标点击时候的outline轮廓，而保留键盘访问时候的outline轮廓，可以使用如下的CSS规则：:focus:not(:focus-visible) { outline: 0; }。

然而在Chrome浏览器下，有一些特殊场景并不符合:focus-visible的表现规则，例如设置了背景的<button>按钮、HTML5 <summary>元素以及设置了HTML tabindex属性的元素。

相关问题

focus-visible

:focus-visible是一个伪类，用于判断元素的聚焦行为是由键盘还是鼠标触发的。它可以帮助我们在样式中区分键盘触发的聚焦行为和鼠标触发的聚焦行为。具体来说，当用户使用键盘的Tab键或快捷键触发焦点元素时，:focus-visible会应用焦点环样式。而当用户使用鼠标点击焦点元素时，:focus-visible不会应用焦点环样式。这样，我们可以根据:focus-visible来设置不同的样式，比如去除鼠标点击时的outline轮廓，保留键盘访问时的outline轮廓。在Chrome浏览器中，它被认为是键盘访问触发的元素聚焦的表示。所以，如果我们想要去除鼠标点击时的outline轮廓，而保留键盘访问时的outline轮廓，只需要使用一条简单的CSS规则：:focus:not(:focus-visible) { outline: 0; }。\[1\]\[2\]\[3\]
#### 引用[.reference_title]
- *1* [CSS常用伪类选择器详解](https://blog.csdn.net/qq_43293207/article/details/115034768)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [css新加特性](https://blog.csdn.net/weixin_42845571/article/details/127765132)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [强大的CSS：focus-visible伪类真的太6了！](https://blog.csdn.net/kaixinyitian77/article/details/90451883)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]

button is-focus-visible

根据提供的引用内容，可以得知:focus-visible伪类可以判断是由键盘还是鼠标触发的聚焦行为。因此，如果想要让button元素在键盘聚焦时有不同的样式，可以使用:focus-visible伪类来实现。

以下是一个示例代码，当button元素通过键盘Tab触发聚焦时，会添加一个蓝色的边框样式：

button:focus-visible {
  outline: 2px solid blue;
}