时间戳

首页 > 解决方案 > 更改浏览器默认表单下拉按钮？

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

问题描述

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

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

苹果浏览器

铬合金

火狐

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

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

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

标签： htmlcssformsbrowser

解决方案

这不是一个下拉元素 - 而是一个选择 html 元素，因此可用的样式有限，正如您所发现的 - 浏览器之间的差异很大。

您可以隐藏浏览器本机图标并通过在父（选择包装）元素上设置 position: relative 并在子（图标）元素上设置 position: 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>

推荐阅读