Привет, я создал вариант выбора кроссбраузера, который имеет тот же дизайн на браузерах хром, 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>
На браузерах хром и сафари (настольная и планшетные ПК) работает хорошо и выглядит следующим образом:
Но на IE, значок на левой стороне, а не на праве, как и в других браузерах:
Я нашел комментарий, что IE не может правильно установить фоновые позиции при выборе. Есть ли хороший способ для этого? Я ничего не нашел.
Спасибо.
Можете ли вы объяснить, в какой версии IE? – Rotan075
@ Rotan075 Да, это IE11 .. – MrBuggy