如何在隱藏的單選按鈕上使用鍵盤選項卡

Question

在一個表單中，我有以下通用 html：

 <input type="text" autofocus placeholder="Full name" /> <input name="yesno" type="radio" value="Yes" id="yes"> <label for="yes">Yes</label> <input name="yesno" type="radio" value="No" id="no"> <label for="no">No</label>

在這種形式中，我可以從文本input中選擇選項卡，然后使用左/右鍵選擇“是”或“否”。

然后我應用一些樣式來使單選按鈕符合設計：

 input[type="text"] { height: 60px; text-indent: 1em; } input[type="radio"] { display: none; } input[type="radio"]+label { color: #106AA2; background: #fff; font-weight: 100; text-align: center; padding: 1em 2em; height: auto; font-size: 1.3em; border: 1px solid #C5DBE8; display: inline-block; letter-spacing: inherit; vertical-align: middle; cursor: pointer; } input[type="radio"]:checked+label { background: linear-gradient(#1275B2, #106AA2); color: #fff; }

 <input type="text" autofocus placeholder="Full name" /> <input name="yesno" type="radio" value="Yes" id="yes"> <label for="yes">Yes</label> <input name="yesno" type="radio" value="No" id="no"> <label for="no">No</label>

但是，我現在不能再從文本input到單選按鈕的TAB 。 我知道這是因為我有display:none 。

是否有一種跨瀏覽器的方式可以讓用戶在這些單選按鈕上使用TAB ？

理想情況下，我正在尋找純 CSS 的解決方案，但是我對 javascript 解決方案持開放態度。

Answer 1

不要讓它不存在display: none; 只是縮小它。

您可以將width和height設置為0以使輸入不可見，但可以使用制表符。

 input[type="text"] { height: 60px; text-indent: 1em; } input[type="text"]:focus { outline: solid 1px lightblue; } input[type="radio"] { /* display: none; */ width: 0; height: 0; } input[type="radio"]+label { color: #106AA2; background: #fff; font-weight: 100; text-align: center; padding: 1em 2em; height: auto; font-size: 1.3em; border: 1px solid #C5DBE8; display: inline-block; letter-spacing: inherit; vertical-align: middle; cursor: pointer; } input[type="radio"]:checked+label { background: linear-gradient(#1275B2, #106AA2); color: #fff; } input[type="radio"]:focus+label { outline: solid 1px black; }

 <input type="text" autofocus placeholder="Full name" /> <input name="yesno" type="radio" value="Yes" id="yes"> <label for="yes">Yes</label> <input name="yesno" type="radio" value="No" id="no"> <label for="no">No</label>

Answer 2

不要隱藏單選按鈕，用標簽覆蓋它們，而不是使用具有負左值的相對位置

並為標簽上的焦點樣式添加自定義 CSS。 更新的 CSS

input[type="radio"]:focus+label {
  outline: 2px dotted red;
}

input[type="radio"]+label {
  color: #106AA2;
  background: #fff;
  font-weight: 100;
  text-align: center;
  padding: 1em 2em;
  height: auto;
  font-size: 1.3em;
  border: 1px solid #C5DBE8;
  display: inline-block;
  letter-spacing: inherit;
  vertical-align: middle;
  cursor: pointer;
  position: relative;
  left: -20px;
}

 input[type="text"] { height: 60px; text-indent: 1em; } input[type="radio"]:focus+label { outline: 2px dotted red; } input[type="radio"]+label { color: #106AA2; background: #fff; font-weight: 100; text-align: center; padding: 1em 2em; height: auto; font-size: 1.3em; border: 1px solid #C5DBE8; display: inline-block; letter-spacing: inherit; vertical-align: middle; cursor: pointer; position: relative; left: -20px; } input[type="radio"]:checked+label { background: linear-gradient(#1275B2, #106AA2); color: #fff; }

 <input type="text" autofocus placeholder="Full name" /> <input name="yesno" type="radio" value="Yes" id="yes"> <label for="yes">Yes</label> <input name="yesno" type="radio" value="No" id="no"> <label for="no">No</label>

Answer 3

單選按鈕本身不是“可選項卡”。 您需要使用鍵盤箭頭來更改選擇的收音機。 當涉及到可訪問性時，這是預期的行為。 然而，我建議的是給出所選收音機的視覺表示（正如您已經對標簽所做的那樣）。

這就是所有需要的。

input[type="radio"] {
  opacity: 0;
  position: absolute;
  z-index: -1;
}

這是下面的最終答案

 input[type="text"] { height: 60px; text-indent: 1em; } input[type="radio"] { opacity: 0; position: absolute; z-index: -1; } input[type="radio"]+label { color: #106AA2; background: #fff; font-weight: 100; text-align: center; padding: 1em 2em; height: auto; font-size: 1.3em; border: 1px solid #C5DBE8; display: inline-block; letter-spacing: inherit; vertical-align: middle; cursor: pointer; } input[type="radio"]:checked+label { background: linear-gradient(#1275B2, #106AA2); color: #fff; }

 <input type="text" autofocus placeholder="Full name" /> <input name="yesno" type="radio" value="Yes" id="yes"> <label for="yes">Yes</label> <input name="yesno" type="radio" value="No" id="no"> <label for="no">No</label>