Question

我想用图片而不是这个恼人的箭头制作自定义下拉列表所以在这个论坛中有人建议将select包装在一个较小的div中。一切正常。问题在于选择。

当我选择一个选项时，您知道蓝色背景突出显示指示所选元素，即使选择了元素时问题仍然存在，此突出显示仍会覆盖我的图像箭头。

我该如何解决这个问题

我尝试使用选择optin但没有发生任何事情！

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

Answer 1

如果您想设置下拉列表，我建议您使用以下插件： Jquery Selectbox

这个下拉菜单可以满足您的需求！

如何使用透明背景突出显示Dropdown

1 个答案: