Ich habe einen benutzerdefinierten Radioeingang Stil, der mehr oder weniger wie dies umgesetzt wird:: Fokus Styling auf individuellen Radioeingang
<input type="radio" id="testradio" class="visuallyhidden custom-radio">
<label for="testradio">...</label>
.custom-radio + label:before {
content: ""
// Styling goes here
}
.custom-radio:focus + label:before {
outline: 1px solid black;
]
Dies funktioniert gut, außer für eine quälende Detail: der Fokus Stil für Tastaturnavigation. Ich kann die Gruppe der Optionsschaltflächen auf der Registerkarte auswählen und mithilfe der Pfeiltasten die ausgewählte Option ändern, aber der Standard: Fokuskontur wird nicht angezeigt, da das Eingabe-Tag ausgeblendet ist.
Ich habe versucht, meinen eigenen Fokus-Stil wie oben hinzuzufügen, aber das endet anders als die Standard-Browser-Styling. Standardmäßig zeichnet Chrome (und andere Browser, die ich annahm) nur dann eine Gliederung, wenn Sie die Radioeingaben auf der Tastatur auswählen und nicht, wenn Sie darauf klicken. Der CSS: -Fokusstil scheint jedoch auch auf die Radioeingabe zu wirken (oder in diesem Fall auf das Label zu klicken), was wirklich schlecht aussieht.
Grundsätzlich meine Frage ist das: Wie wende ich einen: Fokus-Stil auf eine Radio-Eingabe, die das Standardverhalten des Browsers vollständig simuliert, d. H. Nicht von einem Mausklick Fokus erscheint? Oder gibt es eine andere Möglichkeit, diese Funkeingabe anzupassen, die mir hilft, das Standardverhalten beizubehalten?
Edit: Hier ist ein JSFiddle zeigt, was ich rede. In der ersten Zeile können Sie auf ein Optionsfeld klicken und dann mit den Pfeiltasten navigieren. Die Gliederung wird nur angezeigt, wenn Sie die Tastatur verwenden. In der zweiten Zeile wird durch Klicken auf das Optionsfeld sofort der Fokus-Stil ausgelöst.
http://jsfiddle.net/7Ltcks3n/1/
Eingang: Fokus ????? –
Ich benutze Eingabe: Fokus, aber es verhält sich nicht auf die gleiche Weise wie der Browser standardmäßig funktioniert, wenn es um Mausklicks geht. –
Wo ist der 'input: focus' auf Ihrem bereitgestellten css? – LcSalazar