Tab durch nur Etiketten anstelle von Kreisen in Radiobuttons html

Question

Ich möchte die Radioknöpfe Kreise ausblenden und nur durch die Etiketten. Ich konnte den Kreis ausblenden, aber wenn ich mit der Tabulatortaste durch alle Labels navigiere, wird nicht auf das jeweilige Label fokussiert. Das Bild unten zeigt das Etikett, durch das ich navigieren möchte, und wähle eines aus.

Derzeit verwende ich Radio-Buttons und ich versuche, zu navigieren. Die Navigation mit der Tastatur funktioniert, aber sie fokussiert nicht auf das ausgewählte Label.

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 }} 

Sollte ich einen anderen Eingabetyp verwenden, um es zu ändern, oder versuchen, etwas in diesem Code selbst zu ändern?

Answer 1

Html Lösung

Hier ist, wie ich das Problem lösen würde:
einfach den HTML und CSS-Stylesheet ändern.
(Beachten Sie, ich kenne keine AngularJS so i totaly hier falsch sein könnte)

.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>