更改浏览器默认表单下拉按钮？

Question

我有一个非常奇怪的CSS问题，会影响不同的浏览器，我不知道这是怎么发生的。如何设置表单下拉菜单按钮和下拉菜单内容的样式？可以更改背景颜色，可以更改边框，但更改CSS边框半径时边框半径不会更改。

表单按钮在每个浏览器上看起来都不同。下拉菜单在Firefox上显示效果最佳，因为它没有边框半径，没有像Safari这样的辉光，甚至下拉内容也显示绿色背景色和白色文本。

1 = Safari，发光+边框半径+基本的白色下拉内容。

2 = Chrome，边框半径+基本的白色下拉菜单内容+更长的长度。

3 =完美样式的Firefox，具有下拉菜单样式的样式，但是下拉菜单图标很糟糕！

Answer 1

这不是下拉元素-而是select html元素，因此可用样式有限，并且您已经发现-浏览器之间存在很大差异。

您可以隐藏浏览器本机图标，并通过在父元素（select-wrapper）上设置position：relative和在子元素（icon）元素上设置absolute：absolute并根据需要定位，来插入自己的图标。

这使您可以控制图标的外观。请注意，对于可访问性方面的问题，建议您先关注焦点-但如果您绝对希望可以将其删除。

.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>