如何把html的select控件的下拉箭头改成图

Posted 2023-04-01

参考技术A

把html的select控件的下拉箭头改成图片：

1、需要修改的html代码如下：

<div>

  <select>

    <option>Here is the unstyled select box</option>

    <option>The second option</option>

    <option>The third option</option>

  </select>

</div>

2、css样式代码如下：

div margin: 20px;

.styled-select

   background: url(./15xvbd5.png) no-repeat 96% 0;

   height: 29px;

   overflow: hidden;

   width: 240px;

.styled-select select

   background: transparent;

   border: none;

   font-size: 14px;

   height: 29px;

   padding: 5px; /* If you add too much padding here, the options won't show in IE */

   width: 268px;

.styled-select.slate

   background: url(./2e3ybe1.jpg) no-repeat right center;

   height: 34px;

   width: 240px;

3、实现效果如下：

其中，上面是原来的箭头样式，下面是修改后的图片样式。

如何把html的select控件的下拉箭头改成图片，要是能把背景也用图片代替旧更好了

参考技术A 首先我不知道能不能改，其次，就算是能改估计代价也太大。还不如自己做个类似的效果，用div的下拉替代select。css对select控制并不太到位，也不太好。还得写脚本来控制。网站上看到的类似土豆啊、优酷啊。当当之类的下拉，大部分都是用div模拟的select的效果