У меня возникли проблемы с созданием стиля :checked
для моих пользовательских флажков для отображения в Internet Explorer.
Они отлично работают в Chrome.
... но в IE
Здесь соответствующий стиль
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;
}
Я также заметил, что Internet Explorer просто удаляет стиль при загрузке...
Спасибо за любую помощь!
EDIT: Codepen Demo (эта демонстрация также не работает в IE)