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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何把html的select控件的下拉箭头改成图相关的知识,希望对你有一定的参考价值。

参考技术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的效果

以上是关于如何把html的select控件的下拉箭头改成图的主要内容,如果未能解决你的问题,请参考以下文章

CSS怎么去掉select的下拉箭头样式

android的spinner控件能不能改成只有一个向下的箭头

CSS怎么去掉select的下拉箭头样式

在EXCEL中插入日历控件后,如何添加到单元格上(带下拉箭头),点击后出现日历,选择一个日期自动填充并隐

HTML中select控件怎样设置成默认值,并且下拉框选项中没有默认值

如何修改select标签的默认下拉箭头样式?