CSS - 伪类 :focus-visible

上一页
下一页

CSS 中的 :focus-visible 伪类表示已接收焦点的元素。此类通常在用户单击、点击元素或使用键盘的 Tab 键选择元素时触发。

:focus-visible 伪类可用于根据用户首选的功能模式（使用鼠标或键盘）应用不同的焦点指示器。

语法


:focus-visible {
	 	/* ... */
}

:focus 与 :focus-visible

CSS 中的伪类 :focus 和伪类 :focus-visible 用于定位当前具有键盘焦点的元素，但它们的行为有所不同，尤其是在用户体验和可访问性方面。

:focus :focus-visible
定位具有键盘焦点的元素，无论该焦点是通过键盘导航还是通过鼠标单击来实现。 定位具有键盘焦点但仅在使用键盘导航时可见的元素。它通过确保仅在通过键盘输入聚焦元素时应用样式，而不是在通过鼠标或触摸输入聚焦时应用样式，从而帮助改善用户体验。
它不考虑用户如何到达焦点元素，因此它可以包括用户使用鼠标单击元素或在触摸设备上点击它的情况。 它对于为键盘用户创建更易于访问和用户友好的体验特别有用，因为它可以避免在用鼠标单击时将可能分散注意力或不相关的样式应用于元素。 
a:focus {
//元素样式
//具有键盘焦点
}

button:focus-visible {
//元素样式
//具有键盘焦点
//并且可以透过
//键盘导航
}

CSS :focus-visible 示例

让我们看一个例子，显示了 :focus 和 :focus-visible 的区别。尝试使用鼠标和键盘将焦点放在按钮上，看看有什么区别。


<html>
<head>
<style>	
	 	/* Apply focus styles only when accessed via keyboard navigation */
	 	button:focus-visible {
	 	 	 outline: 2px solid green;
	 	 	 background-color: yellow;
	 	 	 }

	 	/* Apply focus styles for all focused elements */
	 	button:focus {
	 	 	 outline: 3px solid blue;
	 	}
</style>
</head>
<body>
	 	<div>
	 	 	 <button>focus-visible</button>
	 	 	 <button>focus-only</button>
	 	</div>
</body>
</html>

以下是按钮的一个经典示例，它展示了选择器 :focus-visible 是如何从 :focus 中脱颖而出的。我们通常不希望在单击按钮后看到焦点环，但是我们希望在使用键盘导航网站时在按钮上看到焦点指示器。在下面的示例中，尝试使用键盘，然后按 Tab 键，看看 :focus-visible 如何通过键盘和 Tab 键帮助我们解决对焦环问题。


<html>
<head>
<style>
	 	label {
	 	 	 display: grid;
	 	 	 font-size: 18px;
	 	 	 color: black;
	 	 	 width: 400px;
	 	}

	 	select {
	 	 	 padding: 10px 16px;
	 	 	 font-size: 16px;
	 	 	 color: black;
	 	 	 background-color: #fff;
	 	 	 border: 1px solid #597183;
	 	 	 border-radius: 8px;
	 	 	 margin-top: 25px;
	 	 	 width: 300px;
	 	 	 transition: all 0.3s ease;
	 	}

	 	.focus-only:focus {
	 	 	 outline: 3px solid orange;
	 	}

	 	.focus-visible-only:focus-visible {
	 	 	 outline: 4px dashed aqua;
	 	}
</style>
</head>
<body>
	 	 <p>Compare what happens when you click on buttons with a mouse, versus when you tab through them using a keyboard. </p>
	 	<button class="focus-only"> focus-only button</button><br><br>
	 	<button class="focus-visible-only"> focus-visible button</button><br><br>
</body>
</html>

CSS :focus - 回退

检查浏览器对 :focus-visible 与 @supports 的兼容性，并在 :focus 规则中重复相同的样式，无论它是否在旧浏览器中正常工作。即使您根本没有为 :focus 指定任何内容作为后备选项，旧浏览器也会显示本机默认轮廓。这个从下面的语法开始：


button:focus { /* some exciting button focus styles */ }

@supports (:focus-visible) {
	 	 	 button:focus { /* undo all the above focused button styles */ }
	 	 	 button:focus-visible { /* and then reapply the styles here instead */ }
}

 

打印本页
上一页
下一页