2014-09-05 20 views
15

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/

+0

Eingang: Fokus ????? –

+1

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

+0

Wo ist der 'input: focus' auf Ihrem bereitgestellten css? – LcSalazar

Antwort

0

können Sie dieses Verhalten durch Scripting erreichen. Zuerst müssen Sie keypress Ereignis zu Radio und fügen Sie den Umriss-Stil in diesem Handler immer wenn das Radio wird konzentriert oder aktiv (durch Hinzufügen Ihrer benutzerdefinierten Radio-Klasse zu aktiven Eingabe). damit Sie den Umriss-Stil bei Mausklick weglassen können.

0

Dies wird Ihr Problem im Moment nicht beheben, aber es gibt tatsächlich einen Selektor, der genau das tut, was Sie brauchen: :focusring (https://github.com/w3c/csswg-drafts/pull/709). Im Moment funktioniert es nur in Firefox, sollte aber auch in anderen Browsern erscheinen.

Sie JS verwenden könnte wie sumankumarg vermuten lässt, aber Sie können auch die Grenze der falschen Eingabe verwenden Fokuszustand zu zeigen, wie so: http://jsbin.com/rofawiginu/edit?html,css,output

0

ich lange mit diesem Problem konfrontiert sind so hier habe ich die Lösung

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; 

}

+0

Dies scheint nur zu funktionieren, wenn Sie das gestylte Styling anpassen. – jmona789

+0

Das funktioniert nicht an meinem Ende in Windows 10/Chrome. Nicht stabil, nicht Crossbrowser. –

+0

Funktioniert nicht auf Mac/Chrome – camiblanch

0

Ich glaube, das ist das, was Sie suchen, mein Freund. Fähigkeit, Standard-Browserkonturen nachzuahmen. Sie sollten die folgende Technik in Ihrem Code verwenden können, um den Effekt zu erzielen.

Demo Code unter, mehr an der Quelle Artikel lesen: 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; 
    } 
} 
1

Das Problem ist, dass scheinbar Blink-Browser Fokus auf Radioelemente halten, nachdem sie angeklickt werden, aber Firefox und Safari nicht.

Um dieses Problem zu umgehen, können Sie dem Dokument unter mousedown und touchstart eine Klasse hinzufügen, die Ihren hinzugefügten Ring verbirgt und ihn unter keydown entfernt.

Arbeitsbeispiel:

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>

0

ich zusammen das Snippet unten basierend auf dem ursprünglichen Code, nicht die Geige Beispiel Sie zur Verfügung gestellt. Von dem, was ich sammle, versuchen Sie, das Standard-Radio-Button mit Ihrem eigenen gestylten Element zu ersetzen (label:before).

Da nicht angegeben wurde, wie die Standardfunkgeräte ausgeblendet sind, habe ich einfach opacity: 0 verwendet und die Position des Beschriftungselements angepasst, um es abzudecken. Der gleiche Effekt kann erreicht werden, indem das Radio vom Bildschirm bewegt wird: position: absolute; top: -999; left -999; (oder etwas Ähnliches).

Ich versuchte mit und vibility: hidden auf den Radios, aber das ist ein Problem, weil apparently the focus action isn't triggered when they aren't visible.

Ich gab auch das label:before Element etwas Styling nur so, dass es auftaucht.

Ihr Problem zu adressieren:

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

Die outline:0 1px solid black; gibt einen Standard-Umriss, wenn das Etikett angeklickt wird. Dies funktioniert gut für FF und IE, aber für Chrome müssen Sie die Farbe in -webkit-focus-ring-color ändern, da es eine blaue Farbe für die Radio-Gliederung verwendet.

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