在選中標記時看到選中標記

如何將焦點輪廓添加到選中標記？例如，當按下鍵盤上的「標籤」時，用戶將看到每個標籤上的內容大綱。在選中標記時看到選中標記

td:focus { 
 
    outline: 3px dotted #000000; 
 
    outline-offset: 1px; 
 
    color: red; 
 
}

<table> 
 
    <tr> 
 
    <td> 
 
     <label for="A1"> 
 
        <span class="hidden">A-1</span> 
 
        <input type="checkbox" value="A1" name-"A1" id="A1"> 
 
        <span aria-hidden="true">&nbsp;</span> 
 
       </label> 
 
    </td> 
 
    </tr> 
 
</table>

我不知道究竟我做錯了。

來源

2017-04-14 user7293417

你想上的複選框，或者整個TD的輪廓？你的問題陳述了一件事'添加一個焦點輪廓到checkmarks'，但你的代碼說另一個'td：focus'。 – csmckelvey

嗨，我想概述複選框，然後我可以選擇他們按空間。謝謝。 – user7293417

無論您想要關注什麼，請將tabindex="0"添加到元素的標記。

td:focus { 
 
    outline: 3px dotted #000000; 
 
    outline-offset: 1px; color:red; 
 
}

<table> 
 
    <tr> 
 
     <td tabindex="0" > 
 
      <label for="A1"> 
 
       <span class="hidden">A-1</span> 
 
       <input type="checkbox" value="A1" name-"A1" id="A1"> 
 
       <span aria-hidden="true">&nbsp;</span> 
 
      </label> 
 
     </td> 
 
    </tr> 
 
</table>

編輯：爲了完整起見，當你改變了「0」到另一個整數> 0，即成爲該元素的Tab鍵順序的地方。例如。 tabindex="3"使元素在頁面的Tab鍵順序中排在第三位。

來源

2017-04-14 20:52:06 sn3ll

謝謝，這個效果很好。但是，當我用空格鍵選中複選框時，它不檢查框。發生什麼事後，通過框中的標籤，它再次通過框標籤，沒有顯示一個輪廓檢查框與空格鍵。如果你知道爲什麼發生這種情況，請隨時告訴我。非常感謝你的時間和幫助。非常感激。 – user7293417

如果您只想指定複選框，則可以使用屬性選擇器。

input[type="checkbox"]:focus { 
 
    outline: 3px dotted #000000; 
 
    outline-offset: 1px; 
 
    color: red; 
 
}

<table> 
 
    <tr> 
 
    <td> 
 
     <label for="A1"> 
 
     <span class="hidden">A-1</span> 
 
     <input type="checkbox" value="A1" name-"A1" id="A1"> 
 
     <span aria-hidden="true">&nbsp;</span> 
 
     </label> 
 
    </td> 
 
    </tr> 
 
</table>

來源

2017-04-14 23:17:17

在選中標記時看到選中標記

回答

相關問題