CSS :avant que ne travaillant pas dans IE11
Je suis remplaçant les traditionnels boutons radio avec des icônes de FontAwesome. Tout fonctionne très bien sur Chrome et Firefox, mais IE11 est d'avoir des problèmes - les icônes je suis en remplaçant les boutons de la radio à ne pas s'afficher du tout.
Modifier avec un travail de Violon: https://jsfiddle.net/sow1a04m/
Exemple dans google Chrome:
Exemple dans IE11:
Voici mon code HTML:
<tr>
<td class="vert-align">Valid Signed and dated delivery ticket in patient's record.</td>
<td class="text-center vert-align">
<label>
<input type="radio" name="radio-group-1" id="radio-group-1-Y" value="Y" />
</label>
</td>
<td class="text-center vert-align">
<label>
<input type="radio" name="radio-group-1" id="radio-group-1-N" value="N" />
</label>
</td>
<td class="text-center vert-align">
<label>
<input type="radio" name="radio-group-1" id="radio-group-1-NA" value="NA" />
</label>
</td>
</tr>
Et voici mon CSS:
#dlg-audit-intake-compliance-checklist input[type=radio] {
visibility: hidden;
}
#dlg-audit-intake-compliance-checklist input[type=radio]:hover {
cursor: pointer;
}
#dlg-audit-intake-compliance-checklist input[type=radio]:before {
visibility: visible;
font-family: FontAwesome;
content: "\f10c";
font-size: 25px;
text-shadow: 1px 1px 0px #ddd;
margin-bottom: 10px !important;
}
#dlg-audit-intake-compliance-checklist input[value=Y]:checked:before {
color: #009C15;
content: "\f00c";
}
#dlg-audit-intake-compliance-checklist input[value=N]:checked:before {
color: #AD0000;
content: "\f00d";
}
#dlg-audit-intake-compliance-checklist input[value=NA]:checked:before {
color: #F7D200;
content: "\f05e";
}
Je pense qu'il peut avoir quelque chose à voir avec la visibility
paramètres que j'ai appliqué, mais je n'ai pas été en mesure de le comprendre sur mon propre.
Pourriez-vous poster une de travail extrait de code avec la police liées, de sorte que nous avons la question reproduite, comme maintenant, il sera beaucoup de devinettes
Vérifiez également ce post, il pourrait donner un indice: stackoverflow.com/questions/23954877/...
merci!!!! Je viens de mettre à jour mes question avec un violon montrant le problème. L'écoute de la Tripoter dans chrome fonctionne très bien, mais comme vous pouvez le voir dans IE11, les icônes ne le montrent pas. Je vais aussi vérifier que le lien que vous avez posté.
Ahh, le problème est à l'aide de pseudo-élément d'un élément d'entrée, il ne fonctionne pas dans IE, l'utilisation d'une étiquette comme cible à la place ... il en fait ne devrait pas travailler dans google Chrome, soit du pseudo-élément est supposé ne pas fonctionner sur une seule balise éléments
Double Possible de CSS sélecteurs de pseudo ::before et ::after ne sera pas affiché dans FF 44 et IE11
Vérifiez également ce post, il pourrait donner un indice: stackoverflow.com/questions/23954877/...
merci!!!! Je viens de mettre à jour mes question avec un violon montrant le problème. L'écoute de la Tripoter dans chrome fonctionne très bien, mais comme vous pouvez le voir dans IE11, les icônes ne le montrent pas. Je vais aussi vérifier que le lien que vous avez posté.
Ahh, le problème est à l'aide de pseudo-élément d'un élément d'entrée, il ne fonctionne pas dans IE, l'utilisation d'une étiquette comme cible à la place ... il en fait ne devrait pas travailler dans google Chrome, soit du pseudo-élément est supposé ne pas fonctionner sur une seule balise éléments
Double Possible de CSS sélecteurs de pseudo ::before et ::after ne sera pas affiché dans FF 44 et IE11
OriginalL'auteur FastTrack | 2016-06-15
Vous devez vous connecter pour publier un commentaire.
Le problème est à l'aide de pseudo-élément d'un élément d'entrée, il ne fonctionne pas dans IE, l'utilisation d'une étiquette comme cible à la place ... il en fait ne devrait pas travailler dans google Chrome, soit du pseudo-élément est supposé ne pas fonctionner sur une seule balise éléments.
J'ai changé cette règle pour montrer comment vous pouvez le faire, vous verrez que ça fonctionne maintenant avec les FontAwesome
Mis à jour le violon
OriginalL'auteur LGSon
Vous ne pouvez pas fiable style case de radio et entrées dans les navigateurs et systèmes d'exploitation. Ce n'est pas un problème spécifique à IE. C'est un contrôle de système d'exploitation. Utiliser les CSS pour cibler l'étiquette d'entrée et de masquer la case à cocher à la place.
HTML
CSS
Je pense que si vous enroulez la case avec l'étiquette que vous n'avez même pas besoin de= pour créer l'étiquette cliquable si je ne me trompe pas. Peut-être juste un bootstrap chose pas sûr
C'est correct, bien que la
:checked
code ne fonctionnera pas, car il ne peut pas cibler le parent de l'input
, alors comment il est maintenant, est nécessaire pour faire le travail demandé par l'OPOriginalL'auteur user2867288