更改浏览器-默认表单下拉按钮？
更改浏览器-默认表单下拉按钮？
提问于 2020-02-17 07:19:20
我有一个非常奇怪的CSS问题，影响不同的浏览器，我不明白这是怎么发生的。如何设置表单下拉菜单按钮和下拉内容的样式？背景颜色可以改变，边框可以改变，但是当改变CSS边框半径时，边框半径不变。
表单按钮在每个浏览器上的外观都不同。下拉菜单在Firefox上显示得最好，因为它没有边框半径，没有Safari那样的光泽，甚至下拉内容也显示为绿色背景和白色文本。
1= Safari，发光+边框半径+基本白色下拉内容。
2=铬，边框半径+基本白色下拉内容+更大长度。
3=火狐，完美的风格，有风格的下拉内容，但可怕的下拉图标！
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-02-17 07:36:46
这不是一个dropdown元素，而是一个精选的html元素，因此样式有限，正如你所发现的那样，在不同的浏览器之间有很大的差异。
您可以隐藏浏览器原生图标，并通过在父(select-wrapper)元素上设置position: relative和在子(图标)元素上设置position: absolute来插入您自己的图标，并根据需要对其进行定位。
这使您可以控制图标的外观。请注意，focus上的发光是出于可访问性的考虑而推荐的-但如果你绝对想要的话，你可以删除它。
.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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60254135
复制相关文章
相似问题
腾讯云开发者
