Блог

Главная - Вопросы по программированию - Переключение css не работает в Internet Explorer

Переключение css не работает в Internet Explorer

#html #css

#HTML #css

Вопрос:

Я создал пользовательский переключатель с флажком, и он отлично работает в Chrome, но не работает в IE 11. Как исправить эту проблему?

это мой css, который я проверил в IE, этот внешний вид Webkit не поддерживается? 

     body{
        text-align: center;
    }
    
    input[type="checkbox"]{
        position: relative;
        width: 60px;
        height: 30px;
        -webkit-appearance: none;
        appearance: none;
        -moz-appearance: none;
        background:#d6d6d6;
        border-radius: 20px;
        outline:none;
    }
    input[type="checkbox"]::-ms-expand{
        display: none;
    }
    input:checked[type='checkbox']{
        background:#0196fe;
    
    }
    input[type="checkbox"]:before{
        content: '';
        position:absolute;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: white;
        border: 2px solid #000000;
        left: 0;
        top:-1px;
    }
    input:checked[type="checkbox"]:before{
        left: 30px;
        border: 2px solid #5dc8f1;
    }  
     <Input type="checkbox" name="checkbox" />

Ответ №1:

Заменить

 input[type="checkbox"]::-ms-expand {
    display: none;
}

с 

 input[type="checkbox"]::-ms-check {
    visibility: hidden;
    /* or */
    opacity: 0;
}

-ms-expand предназначено для выбранных элементов, тогда как -ms-check предназначено для флажков и радиокнопок.

Комментарии:

1. можем ли мы удалить -ms-check? есть ли какой-либо другой способ устранить проблему

2. Я абсолютно согласен с этим! Надеюсь, что это решит его проблему

3. О, вам, вероятно, нужно просто сделать его невидимым, а не display: none . Я отредактировал свой ответ.