: styling focus su ingresso radio personalizzato

Question

Ho uno stile radio personalizzata in ingresso che viene implementato più o meno così:

<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; 
] 

Questa grande opera, tranne per un dettaglio fastidioso: lo stile di punto di riferimento per la navigazione da tastiera. Posso tab-selezionare il gruppo di pulsanti di opzione e utilizzare i tasti freccia per modificare quello selezionato, ma il valore predefinito: contorno di messa a fuoco non viene visualizzato perché il tag di input è nascosto.

Ho provato ad aggiungere il mio stile di messa a fuoco come sopra, ma questo si comporta in modo diverso rispetto allo stile predefinito del browser. Per impostazione predefinita, Chrome (e altri browser presumo) disegnerà una struttura solo quando selezioni da tastiera gli input radio, non quando li fai clic. Tuttavia, il CSS: lo stile di messa a fuoco sembra applicarsi quando si fa clic sull'ingresso della radio (o in questo caso, facendo clic sull'etichetta), che sembra davvero pessimo.

Fondamentalmente la mia domanda è questa: come applico uno stile di messa a fuoco a un ingresso radio che simula completamente il comportamento predefinito del browser, ovvero non viene visualizzato da un clic del mouse? O c'è un altro modo in cui posso personalizzare questo ingresso radio che mi aiuterà a mantenere il comportamento predefinito?

Modifica: Ecco un JSFiddle che dimostra di cosa sto parlando. Sulla prima riga, puoi fare clic su un pulsante di opzione e quindi navigare con i tasti freccia: il contorno viene visualizzato solo quando si utilizza la tastiera. Nella seconda riga, facendo clic sul pulsante di opzione si attiva immediatamente lo stile di messa a fuoco.

http://jsfiddle.net/7Ltcks3n/1/

Answer 1

È possibile ottenere questo comportamento tramite scripting. Innanzitutto è necessario associare l'evento keypress alla radio e aggiungere lo stile struttura in quel gestore ogni volta che la radio viene messa a fuoco o attiva (aggiungendo la classe della radio personalizzata all'ingresso attivo). in modo che tu possa omettere lo stile del contorno al clic del mouse.

Answer 2

Questo non risolverà il problema al momento, ma in realtà è in arrivo un selettore che fa esattamente ciò di cui hai bisogno: :focusring (https://github.com/w3c/csswg-drafts/pull/709). Al momento funziona solo con Firefox, ma dovrebbe essere disponibile anche su altri browser.

Si potrebbe utilizzare JS come sumankumarg suggerisce, ma è anche possibile utilizzare il bordo dell'ingresso falso per mostrare lo stato di messa a fuoco in questo modo: http://jsbin.com/rofawiginu/edit?html,css,output

Answer 3

Ho affrontato questo problema così a lungo qui ho ottenuto la soluzione

https://jsfiddle.net/hahkarthick/nhorqnvt/3/

input:focus, input:hover{ 
 
    outline: 2px auto rgb(229, 151, 0); 
 
    outline-offset: -2px; 
 
}

<input id="inp" type=radio>radio1 
 
<input type=radio>radio2 
 
<input type=radio>radio3 
 
<input type=radio>radio4 
 
<input type=radio>radio5

input:focus, input:hover{ 
outline: 2px auto rgb(229, 151, 0); 
outline-offset: -2px; 

}

Answer 4

Credo che questo è quello che stai cercando, il mio amico. Capacità di imitare i profili del browser predefinito . Dovresti essere in grado di usare la tecnica sottostante nel tuo codice per ottenere l'effetto.

codice Demo sotto, per saperne di più a Fonte Articolo: https://ghinda.net/article/mimic-native-focus-css/

.unreal-focus { 
    outline-width: 2px; 
    outline-style: solid; 
    outline-color: Highlight; 
} 

/* WebKit gets its native focus styles. 
*/ 
@media (-webkit-min-device-pixel-ratio:0) { 
    .unreal-focus { 
    outline-color: -webkit-focus-ring-color; 
    outline-style: auto; 
    } 
} 

Answer 5

Il problema è che i browser a quanto pare Blink mantenere la concentrazione su elementi di radio dopo che sono cliccato, ma Firefox e Safari non fanno.

Per risolvere il problema, è possibile aggiungere una classe al documento sulla mousedown e touchstart che nasconde il vostro anello aggiunto, e rimuoverlo su keydown.

esempio di lavoro:

var className = 'focus-radio-hide-ring'; 
 
var add = function() { 
 
    document.documentElement.classList.add(className); 
 
}; 
 
var remove = function() { 
 
    document.documentElement.classList.remove(className); 
 
}; 
 
window.addEventListener('mousedown', add, true); 
 
window.addEventListener('touchstart', add, true); 
 
window.addEventListener('keydown', remove, true);

.custom-radio { 
 
\t position: absolute; 
 
\t opacity: 0; 
 
} 
 
.custom-radio + label { 
 
\t cursor: pointer; 
 
} 
 
.custom-radio + label:before { 
 
\t content: ""; 
 
\t display: inline-block; 
 
\t vertical-align: middle; 
 
\t width: 0.75em; 
 
\t height: 0.75em; 
 
\t margin-right: 0.25em; 
 
\t background: #EEEEEE; 
 
\t border: 1px solid #AAAAAA; 
 
\t border-radius: 50%; 
 
} 
 
.custom-radio:checked + label:before { 
 
\t background: #6666FF; 
 
} 
 

 
/* Add styles here: */ 
 
.custom-radio:focus + label:before { 
 
\t box-shadow: 0 0 4px 1px rgba(0, 0, 0, 1); 
 
} 
 
/* Add disable them again here: */ 
 
.focus-radio-hide-ring .custom-radio:focus + label:before { 
 
\t box-shadow: none; 
 
}

<p><input placeholder="Tab from here"></p> 
 

 
<input id="testradio" type="radio" class="custom-radio"> 
 
<label for="testradio">Example</label>

Answer 6

ho messo insieme il frammento di seguito in base al codice originale, non l'esempio violino che hai fornito. Da ciò che raccolgo, stai cercando di sostituire il pulsante di opzione predefinito con il tuo elemento in stile (label:before).

Poiché non è stato specificato come le radio di default sono nascoste, ho semplicemente usato opacity: 0 e ho regolato la posizione dell'elemento etichetta per coprirlo. Lo stesso effetto può essere ottenuto spostando la radio dallo schermo: position: absolute; top: -999; left -999; (o qualcosa di simile).

Ho provato a utilizzare display: none e vibility: hidden sulle radio, ma questo è un problema perché apparently the focus action isn't triggered when they aren't visible.

Ho anche dato all'elemento label:before un po 'di stile solo per mostrarlo.

Per affrontare il problema:

.custom-radio:focus + label:before { 
    outline: 1px solid black; 
    outline: 1px auto -webkit-focus-ring-color; 
} 

Il outline:0 1px solid black; dà un contorno predefinito quando l'etichetta viene cliccato. Funziona bene per FF e IE, ma per Chrome, è necessario cambiare il colore in -webkit-focus-ring-color perché utilizza un colore blu per il contorno della radio.

.visuallyhidden { 
 
    opacity: 0; 
 
} 
 
.custom-radio + label { 
 
    position: relative; 
 
    left: -25px; 
 
    margin-right: -15px; 
 
} 
 
.custom-radio + label:before { 
 
    content: "X"; 
 
    margin: 5px; 
 
    // Styling goes here 
 
} 
 

 
.custom-radio:focus + label:before { 
 
    outline: 1px solid black; 
 
    outline: 1px auto -webkit-focus-ring-color; 
 
}

<input type="radio" name="testradio" id="testradio1" class="visuallyhidden custom-radio"> 
 
<label for="testradio1">radio 1</label> 
 
<input type="radio" name="testradio" id="testradio2" class="visuallyhidden custom-radio"> 
 
<label for="testradio2">radio 2</label> 
 
<input type="radio" name="testradio" id="testradio3" class="visuallyhidden custom-radio"> 
 
<label for="testradio3">radio 3</label>