ラジオボタンの円ではなくラベルだけを使用したタブhtml

Question

ラジオボタンの円を非表示にして、ラベルにタブを付けるだけです。私はサークルを非表示にすることができましたが、タブキーを使用してすべてのラベルをナビゲートすると、それぞれのラベルに注目することはありません。下の図は、ナビゲートしていずれかを選択したいラベルを示しています。

現在、私はラジオ・ボタンを使用してナビゲートしようとしています。キーボードを使用したナビゲーションは機能していますが、選択したラベルには焦点が当てられません。

div 
       label.font-normal(ng-repeat="priority in vm.priorities") 
        input(type="radio", ng-value="priority", ng-model="vm.selectedPriority", name="priority.{{ priority }}", ng-change="vm.changedPriority()") 
        span.color-block-radio-grp-label(for="radio", ng-class="'priority-{{ priority }}'", ng-focus="focus='true'") 
         | &nbsp {{ priority | alertPriority }} 

他の入力タイプを使用してこのコード自体の中で何かを変更する必要がありますか？
ちょうどHTMLとCSS-スタイルシートを変更：

Answer 1

のHTMLソリューションここ

は、私はこの問題を解決する方法です。
努力@Persijnため

.pretty-radio label { 
 
    border-radius: 5px; 
 
    border-width: 2px; 
 
    border-style: solid; 
 
    border-color: black; 
 
    margin: 3px; 
 
    padding: 0px 10px; 
 
    display: inline-block; 
 
} 
 
.pretty-radio input[type=radio].Urgent:checked ~ Label.Urgent::before, 
 
.pretty-radio input[type=radio].High:checked ~ Label.High::before, 
 
.pretty-radio input[type=radio].Medium:checked ~ Label.Medium::before, 
 
.pretty-radio input[type=radio].Low:checked ~ Label.Low::before, 
 
.pretty-radio input[type=radio].None:checked ~ Label.None::before { 
 
    content: '✔'; 
 
    font-size: 0.8em; 
 
} 
 
.pretty-radio input[type=radio] { 
 
    position: absolute; 
 
    opacity: 0; 
 
} 
 
.pretty-radio input.Urgent ~ Label.Urgent { 
 
    border-color: #D0231C; 
 
    color: #D0231C; 
 
} 
 
.pretty-radio input.Urgent:focus ~ Label.Urgent { 
 
    background-color: #D0231C; 
 
    color: white; 
 
} 
 
.pretty-radio input.High ~ Label.High { 
 
    border-color: #FF9700; 
 
    color: #FF9700; 
 
} 
 
.pretty-radio input.High:focus ~ Label.High { 
 
    background-color: #FF9700; 
 
    color: white; 
 
} 
 
.pretty-radio input.Medium ~ Label.Medium { 
 
    border-color: #F2C335; 
 
    color: #F2C335; 
 
} 
 
.pretty-radio input.Medium:focus ~ Label.Medium { 
 
    background-color: #F2C335; 
 
    color: white; 
 
} 
 
.pretty-radio input.Low ~ Label.Low { 
 
    border-color: #69A94B; 
 
    color: #69A94B; 
 
} 
 
.pretty-radio input.Low:focus ~ Label.Low { 
 
    background-color: #69A94B; 
 
    color: white; 
 
} 
 
.pretty-radio input.None ~ Label.None { 
 
    border-color: #888; 
 
    color: #888; 
 
} 
 
.pretty-radio input.None:focus ~ Label.None { 
 
    background-color: #888; 
 
    color: white; 
 
}

<div class="pretty-radio"> 
 
    <input id="5" name="level" class="Urgent" type="radio" /> 
 
    <label for="5" class="Urgent">Urgent</label> 
 

 
    <input id="4" name="level" class="High" type="radio" /> 
 
    <label for="4" class="High">High</label> 
 

 
    <input id="3" name="level" class="Medium" type="radio" /> 
 
    <label for="3" class="Medium">Medium</label> 
 

 
    <input id="2" name="level" class="Low" type="radio" /> 
 
    <label for="2" class="Low">Low</label> 
 

 
    <input id="1" name="level" class="None" type="radio" /> 
 
    <label for="1" class="None">None</label> 
 
</div>