Как удалить радиус границы по умолчанию из IE11 / Edge В теге Select


Итак,

Я стилизовал тег select, и когда я просматриваю его на IE11 / Edge, он добавляет черную рамку вокруг поля выбора, когда вы нажимаете стрелку раскрывающегося списка.

Я, кажется, не могу найти ничего, что удалило бы эту границу.

Пожалуйста, посоветуйте.

Вот мой CSS

select {
    background: transparent;
    width: 100%;
    padding: 5px;
    font-size: 16px;
    line-height: 1;
    border: 0;
    border-radius: 0;
    height: 59.6px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;   
    padding-left: 17px;
    background: url('##Pathtoimg##') no-repeat 96% #ffffff;
    outline: 0;
    border-color:#fff;
}
1 2

1 ответ:

Это невозможно в IE, потому что стиль элемента будет меняться в зависимости от браузеров. IE использует один стиль, когда Safari использует другой стиль.

Возьмем пример для нашего примера:

<select id="something" name="something">
  <option value="1">This is option 1</option>
  <option value="2">This is option 2</option>
  <option value="3">This is option 3</option>
  <option value="4">This is option 4</option>
  <option value="5">This is option 5</option>
</select>

Проверьте (запустите) это во всех различных браузерах. Стиль всех браузеров для элемента <select> будет отличаться.