Как убрать границы у select, чтобы это было кроссбраузерно?

Question

[ligisayan]

Всем привет! Есть список select который лежит на белом фоне и нужно у него убрать границы. Если задаю border: none;, то в хроме все хорошо, а в мозилле, опере и едже появляется у стрелки серый бекграунд с границей - как от него избавиться?

<div>
  <select aria-invalid="false">
    <option value="Выбор">Выбор</option>
    <option value="1-ая">1-ая</option>
    <option value="2-ая">2-ая</option>
  </select>
</div>

div {
  height: 44px;
  line-height: 3;
}
select {
  border: none;
}

Comments

[Евгений Вольф]

Скорее всего, скрыть селект, и перерисовать его на JS, т.к. каждый браузер отрисовывает некоторые специфические элементы (Селекты, файловые поля, кнопки) - по своему и набор того, что можно стилизовать - довольно сильно разнится, особенно ярко "странное поведение" проявляется в Safari/Apple-устройствах.

[ligisayan]

Евгений Вольф: спасибо, но мне просто фон хотя бы убрать - это возможно?

[Евгений Вольф]

ligisayan: скорее всего, того чего Вы хотите - не получиться сделать нормально. Лучше перерисовать самому, это не сложно, особенно если используете JQuery, например (или другие "прелести").

[ligisayan]

Евгений Вольф: нужно подключить для этого какую-то определенную библиотеку?

[Евгений Вольф]

ligisayan: можно поискать готовые реализации, вот первая попавшаяся упаковка, а можете самостоятельно скрыть стандартный Select и отрисовать свой, из UL/LI'шек, например.

[Евгений Вольф]

ligisayan: Касательно библиотеки - для работы всех примеров выше, нужна будет библиотека JQuery, она очень популярна для решения типовых задач в вебе. Соответственно, если выберете какой-то из вариантов из списка выше, нужно будет её (JQuery) подключить.

[ligisayan]

Alexander Krasnovskyy: да, спасибо - select2 самое то, чуть позже напишу итоговое решение. Евгений Вольф да, спасибо, воспользовался библиотекой сверху - подошла