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

发布网友

我来回答

共1个回答

热心网友

把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、实现效果如下：

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