如何让包裹隐藏input的Label仅在键盘聚焦时显示聚焦样式？

核心思路是利用:focus-visible伪类和:has()选择器，仅当内部隐藏的input通过键盘获得焦点时，才为label添加聚焦样式。

修改后的代码 #

CSS 部分

.visually-hidden {
  position: absolute;
  border: 0;
  width: 1px; /* 修正原代码的单位缺失问题 */
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  word-wrap: normal;
}

body {
  margin: 40px;
}

div {
  display: flex;
  gap: 20px;
}

input:focus {
  outline: none; /* 隐藏的input无需显示聚焦轮廓 */
}

button:focus-visible {
  outline: 4px solid red;
}

/* 仅当内部input通过键盘聚焦时，label显示聚焦样式 */
label:has(input:focus-visible) {
  outline: 4px solid red;
}

HTML 部分

<div>
  <input type="text" />
  <button>Submit</button>
  <label>
    <input class="visually-hidden" type="checkbox" />
    Label
  </label>
</div>

说明 #

• :has(input:focus-visible)：该选择器仅匹配包含处于:focus-visible状态的input的label。:focus-visible是浏览器判断焦点来自键盘操作的伪类，只有通过Tab键等键盘方式聚焦元素时才会触发。
• 修正了原.visually-hidden类中的单位错误，确保元素完全隐藏且不占据布局空间。
• 移除隐藏input的默认聚焦轮廓，避免不可见元素的样式干扰。

修改后，鼠标点击label时，内部input会聚焦但不会触发:focus-visible，因此label不会显示聚焦样式；通过键盘Tab键切换到对应input时，input进入:focus-visible状态，label会显示红色聚焦轮廓，和按钮的行为完全一致。

内容的提问来源于stack exchange，提问作者Misha Moroshko