2016-05-20 4 views
0

Привет, я создал вариант выбора кроссбраузера, который имеет тот же дизайн на браузерах хром, IE и сафари. Я использовал последующий код для этого (на белом пространстве на правой стороне есть для нормальной значок стрелки):Фон выбора в IE оставлен в случае правого

select{ 
 
    transition: border-color ease-in-out 0.15s; 
 
    background: transparent; 
 
    border: 1px solid $BORDER_COLOR; 
 
    outline: 0; 
 
    padding: 5px 25px 5px 5px; 
 

 
    -webkit-user-select: none; 
 
    -moz-user-select: -moz-none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 

 
    -webkit-appearance: none; 
 
    -moz-appearance: radio-container; 
 
    appearance: none; 
 
    background: url("arrow_down_grey.svg") no-repeat center right; 
 
} 
 

 
select::ms-expand { 
 
    display: none; 
 
}
<body> 
 
    <label>City</label> 
 
    <select> 
 
    <option>Zurich</option> 
 
    <option>Vienna</option> 
 
    <option>Berlin</option> 
 
    </select> 
 
    
 
    <label>Country</label> 
 
    <select> 
 
    <option>Switzerland</option> 
 
    <option>Austria</option> 
 
    <option>Germany</option> 
 
    </select> 
 
</body>

На браузерах хром и сафари (настольная и планшетные ПК) работает хорошо и выглядит следующим образом:

enter image description here

Но на IE, значок на левой стороне, а не на праве, как и в других браузерах:

enter image description here

Я нашел комментарий, что IE не может правильно установить фоновые позиции при выборе. Есть ли хороший способ для этого? Я ничего не нашел.

Спасибо.

+1

Можете ли вы объяснить, в какой версии IE? – Rotan075

+0

@ Rotan075 Да, это IE11 .. – MrBuggy

ответ

1

Прежде всего у вас есть опечатка в вашем CSS:

select::ms-expand { 
    display: none; 
} 

Должно быть:

select::-ms-expand { 
    display: none; 
} 

Вы забыли -

Во-вторых, если я смотрю на эту JSFIDDLE в IE11 Я вижу стрелку, выровненную вправо, как вы хотели. Вы тоже это видите?

+0

Да, это на правой стороне в скрипке, но на моем сайте это не так. У меня нет различий ... Это тот же код ... – MrBuggy

+0

Можете ли вы опубликовать свой URL-адрес своего сайта? Чтобы я мог посмотреть? @MrBuggy – Rotan075

+0

Это невозможно в данный момент ... Я сообщу вам, обнаружил ли я ошибку. – MrBuggy

 Смежные вопросы

  • Нет связанных вопросов^_^