我想用图像而不是这个烦人的箭头制作一个自定义下拉菜单所以在这个论坛上有人建议将选择包装在一个较小的 div 中。所以一切正常。问题在于选择。
当我选择一个选项时,您知道蓝色背景突出显示指示所选元素,问题是即使选择了元素,此突出显示仍然覆盖我的图像箭头。
我该如何解决这个问题
我尝试使用选择选项,但什么也没发生!
.styled-select select option ::selection {
background:#fff;
}
这是我的代码: HTML
<div class="styled-select">
<select>
<option>Here is the first option</option>
<option>The second option</option>
</select>
</div>
CSS:-
.styled-select select {
background: transparent;
width: 268px;
padding: 5px;
border: 0;
border-radius: 0;
height: 34px;
line-height: 1;
-webkit-appearance: none;
}
.styled-select {
width: 240px;
height: 34px;
overflow: hidden;
background: url(file:///C:/Users/gismo2/Pictures/fancy_nav_down.jpg) no-repeat right ;
border: 1px solid #ccc;
}