我有一个非常奇怪的CSS问题,会影响不同的浏览器,而且我不知道这种情况是如何发生的。如何设置表单下拉菜单按钮和下拉内容的样式?可以更改背景颜色,可以更改边框,但更改CSS边框半径时边框半径不会更改。
在每个浏览器上,表单按钮看起来都不同。下拉菜单在Firefox上显示效果最佳,因为它没有边框半径,没有像Safari这样的辉光,甚至下拉内容也显示绿色背景色和白色文本。
1 = Safari,发光+边框半径+基本的白色下拉内容。
2 = Chrome,边框半径+基本的白色下拉菜单内容+更长的长度。
3 =完美样式的Firefox,具有下拉菜单样式的样式,但是下拉菜单图标糟糕!
答案 0 :(得分: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>