Изменить браузер-стандартные формы раскрывающихся кнопок?

Question

У меня очень странная проблема CSS, затрагивающая разные браузеры, и я не понимаю, как это происходит. Как я могу стилизовать кнопки выпадающего меню формы и выпадающий контент? Цвет фона может быть изменен, граница может быть изменена, но радиус границы не изменяется при изменении радиуса границы CSS.

Кнопка формы выглядит в каждом браузере по-разному. Раскрывающееся меню лучше всего отображается на Firefox, так как оно не имеет радиуса границы, не светится, как Safari, и даже содержимое выпадающего меню показывает зеленый цвет фона и белый текст.

1 = Safari, свечение + радиус границы + базис c выпадающий белый content.

2 = Chrome, радиус границы + основа c белый выпадающий контент + большая длина.

3 = Firefox, отлично стилизован, имеет стилизованный выпадающий контент, но ужасный выпадающий список значок!

Answer 1

Это не выпадающий элемент - это элемент выбора html, и поэтому он имеет ограниченное количество доступных стилей, и, как вы уже обнаружили, большая разница между браузерами.

Вы можете скрыть собственный значок браузера и вставить свой собственный, установив положение: относительное относительно родительского элемента (select-wrapper) и положение: абсолютное значение для дочернего элемента (значка) и расположите его так, как вам нужно. ,

Это позволяет вам контролировать внешний вид значка. Имейте в виду, что свечение на фокусе рекомендуется для обеспечения доступности, но вы можете убрать его, если вы абсолютно этого хотите.

.select-wrapper {
  position: relative;
  width: 90px
}

select {
  padding: 4px 24px 4px 8px;
  font-size: 14px;
  background: #36af4b;
  color: #fff;
  border-radius: 4px;
   -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
    width: 100%;
    display: block
}

select:focus {
  outline: none;
}

.select-wrapper .fa{
  position: absolute;
  color: #fff;
  right: 10px;
  top: 5px;
  z-index: 1
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />



<div class="select-wrapper">
  <select>
   <option> option 1</option>
   <option> option 2</option>
   <option> option 3</option>
  </select>
  <span class="fa fa-angle-down"></span>
</div>