web-dev-qa-db-fra.com

Internet Explorer 'entrée: vérifié + étiquette: avant' le style n'est pas rendu

Je ne parviens pas à afficher le style :checked dans mes cases à cocher personnalisées dans Internet Explorer.

Ils fonctionnent parfaitement bien dans Chrome.

 enter image description here

... mais dans IE

 enter image description here

Voici le style pertinent

input[type="radio"], input[type="checkbox"] {
    opacity: 1;
    position: absolute;
    top: -9999;

    & + label {
        vertical-align: middle;
    }
}

input[type="radio"] + label:before,
input[type="checkbox"] + label:before {
    content: '\f3fd';
    font-family: 'Ionicons';
    width: 26px;
    height: 20px;
    border: 2px solid #45555F;
    font-size: 24px;
    color: transparent;
    display: table-cell;
    text-align: center;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    padding: 0 2px;
}

input[type="radio"]:checked + label:before,
input[type="checkbox"]:checked + label:before {
    content: '\f383';
    font-family: 'Ionicons';
    font-size: 24px;
    width: 26px;
    height: 20px;
    text-align: center;
    display: table-cell;
    padding: 0 2px;
    border: 2px solid #45555F;
    color: #8ec549;
}

input[type="radio"] + label:before {
    border-radius: 50% !important;
}

J'ai aussi remarqué qu'Internet Explorer supprime simplement le style lors du chargement ...

 enter image description here

Merci pour toute aide!

EDIT: Démo Codepen (Cette démo ne fonctionne pas non plus dans IE)

http://codepen.io/anon/pen/rLJqyK

cssinternet-explorercheckboxcss-selectorspseudo-element
10
connorb

Au lieu de modifier le pseudo-élément :before lorsque coché, j’utilise simplement le pseudo-élément :after pour l’état actif et balaye entre les opacités pour les masquer et les afficher en conséquence.

Merci à tous ceux qui ont aidé.

6
connorb

Essayez une autre approche, j'utilise habituellement l'approche présentée ci-dessous.

Le point important ici est: nous devrions utiliser 'for' attribut sur l'élément 'label' pour qu'il soit lié à l'élément 'input' correspondant.

Cela fonctionnera également dans IE. 

input[type="checkbox"] {
  display: none;
}
label {
  padding-left: 25px;
  position: relative;
  cursor: pointer;
}
label::before {
	content: "";
	width: 16px;
	height: 16px;
	border: 1px solid #aaa;
	display: block;
	position: absolute;
	left: 0;
	top: 0;
}
label p {
  display: inline-block;
}
label input[type="checkbox"]:checked + p::after {
	content: "";
	display: block;
	position: absolute;
	width: 10px;
	height: 5px;
	border-left: 2px solid;
	border-bottom: 2px solid;
	transform: rotate(-45deg);
	left: 3px;
	top: 4px;
	color: #3da5c3;
}
<label for="testInput">
  <input type="checkbox" name="test" id="testInput" value=1 />
  <p>Test Checkbox</p>
</label>

0
Abhishek Mugal

Cela ressemble à un duplicata de Dans IE11, utiliser pseudo element :: before et display: les champs table-cellule et glyphicons ne s'afficheront pas .

En bref, il y a un bogue dans IE10 et 11 où le style font est ignoré pour les pseudo-éléments avec l'affichage table-cell.

Comme indiqué dans le problème de duplication présumée, une solution appropriée consisterait à utiliser un autre type display pour le pseudo-élément en association avec les ajustements nécessaires de vos styles width et height.

0
Nate Whittaker

Le problème que vous rencontrez est unIE10 - IE11bug connu, où ces deux navigateurs ont tendance à ignorer complètement la déclaration de police dans les pseudo-éléments avec display: table-cell. Cela signifie que des propriétés telles quefont,font-size,font-family,coloretc seront toutes supprimées.

Pour contourner ce bogue , il suffirait dans votre cas de:

▶ Utilisezdisplay: table-cellavec un élément réel au lieu d'un pseudo-élément, ou

▶ Remplacezdisplay: table-cellpardisplay: inline-blockou un autrenon-table-cellpour votre pseudo-élément.

▶ Déclarez une propriétéfloatqui a une valeur autre quenonede sorte qu'elle tournedisplay: table-cellendisplay: block.

Voici quelques questions qui rencontrent un problème avecdisplay: table-cellet qui pourraient vous être utiles:

▶ IE pas de coloration: avant comme tableau-cellule, pourquoi?

▶ Positionnement de l'écran intérieur div: tableau-cellule dans IE 10

▶ Afficher la cellule de tableau sur le pseudo-élément dans IE11

0
Angel Politis