包裝輸入的 Label - 如何使焦點樣式僅在使用鍵盤聚焦時才可見，而不是鼠標單擊？

Question

在以下示例中，按鈕的焦點樣式僅在使用鍵盤（而不是鼠標單擊）獲得焦點時可見。

如何在包含隱藏輸入的 label 上實現相同的效果？

在下面的代碼中，當 label 使用鍵盤或鼠標單擊聚焦時，標簽的聚焦樣式可見。 我希望它僅在使用鍵盤聚焦時才可見。

 .visually-hidden { position: absolute; border: 0; width: 1; height: 1; padding: 0; margin: -1; 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: 4px solid red; } button:focus-visible { outline: 4px solid red; } label:focus-within { outline: 4px solid red; }

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

Answer 1

更新其內部輸入的 styles 以便它可以在視覺隱藏的同時獲得焦點：

 label { position:relative; }.visually-hidden { position: absolute; inset: 0; margin: 0; padding: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; overflow: hidden; } button:focus-visible, input:focus-visible{ outline: 4px solid red; } body { margin: 40px; } div { display: flex; gap: 20px; }

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