IE-Optionsfeld ausblenden funktioniert nicht

Dieses Stück Code funktioniert in Chrome, aber die Standard-Optionsfeld wird in IE über den Stil angezeigt.IE-Optionsfeld ausblenden funktioniert nicht

In IE wird die Optionsschaltfläche nicht ausgeblendet. Hier ist der Code.

input[type=radio] { 
 
    appearance: none; 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
    width: 15px !important; 
 
    height: 15px !important; 
 
    border: 3px solid #999999 !important; 
 
    border-radius: 50% !important; 
 
    outline: none !important; 
 
} 
 
input[type=radio]:hover { 
 

 
} 
 
input[type=radio]:before { 
 
    content: '' !important; 
 
    display: block !important; 
 
    width: 100% !important; 
 
    height: 100% !important; 
 
    margin: 0 auto !important; 
 
    border-radius: 50% !important; 
 
} 
 
input[type=radio]:checked:before { 
 
    background: #005eb8 !important; 
 
}

<input type="radio" id="a"/>No 1

Quelle

2016-07-26 Nirmal Krishna

Sie können nicht Pseudo-Element auf einzelne Tag Elemente wie 'input', noch verwenden, Chrome es nicht machen, tut IE nicht – LGSon

Stylen Sie die Radio-Buttons nicht selbst, da einige Browser dies nicht unterstützen. Verwenden Sie mehr Markup für benutzerdefinierte Radio- oder Checkbuttons. Gutes Beispiel hier - https://codepen.io/mitchmc/pen/pebIx – 3rdthemagical

Kann ich in Ihrer Version von IE wissen? IE alte Bowers unterstützt die Pseudo-Elemente nicht. http://caniuse.com/#feat=css-gencontent http://stackoverflow.com/questions/7157405/are-css3-before-and-after-pseudo-elements-supported-by-ie9-oder- nicht –

-1

Das Problem mit dem Code ist es das Pseudo auf das input Element zu verwenden.

Pseudo-Element nicht auf einzelne Tag-Element funktionieren sollte, wie input, img und so weiter, obwohl Chrome es

sowieso lassen

Wenn Sie die Pseudo auf dem label stattdessen gesetzt ist, wird es

Cross-Browser arbeiten

div { 
 
    padding: 5px 0; 
 
} 
 
input[type="radio"] { 
 
    display: none; 
 
} 
 
input[type="radio"] + label::before { 
 
    content: ''; 
 
    display: inline-block; 
 
    width: 14px; 
 
    height: 14px; 
 
    margin: 0 8px -2px 0; 
 
    cursor: pointer; 
 
    border-radius: 50%; 
 
    border: 1px solid gray; 
 
} 
 
input[type="radio"]:checked + label::before { 
 
    background: #005eb8; 
 
}

<div> 
 
    <input type="radio" id="r1" name="rd"> 
 
    <label for="r1">Button 1</label> 
 
</div> 
 
<div> 
 
    <input type="radio" id="r2" name="rd"> 
 
    <label for="r2">Button 2</label> 
 
</div>

Quelle

2016-07-26 09:47:20 LGSon

Danke LGSon –

Downvoter, kümmern sich darum, warum, auf einem voll funktionsfähigen Code-Snippet zu kommentieren? – LGSon

-1

Keep it simple.

Standard verwenden (Browser angewandt) Stil
Verwenden maßgeschneidertes Funkelement (benötigt zusätzliche Markup, js usw.)

Tympanus Sie mit schönen Beispielen. Sie verwenden "Label" und Pseudo-Elemente, um schöne - benutzerdefinierte Radio-Buttons zu erstellen.

Quelle

2016-07-26 09:27:41 karlisup

Kann mir bitte jemand erklären, warum diese Antwort abgelehnt wurde? – karlisup

Am wahrscheinlichsten, weil Sie mit einem Tool verknüpft sind, anstatt ein funktionierendes Beispiel/Code-Snippet bereitzustellen. Dennoch habe ich das in meiner Antwort getan und wurde downvoted, also tun einige Benutzer das einfach, ohne irgendeine Erklärung was auch immer. – LGSon

Ich mag Ihre Lösung. Ich schätze beim nächsten Mal, anstatt Dinge vorzuschlagen, sollte ich einfach deinem Vorschlag folgen und einfach das q beantworten und Code-Snippet bereitstellen;). Danke für den Rat! – karlisup

IE-Optionsfeld ausblenden funktioniert nicht

Antwort

Verwandte Themen