下拉框右侧图标替换+背景透明（文字不透明）

html+css设置下拉框右侧图标：

两种方法：

方法一：

首先看一般的下拉框：


右侧的小三角总是变不了，如何替换成自己想要的图标呢？

再来看替换后的效果：



原理：

1.给下拉框设置一个外围div并设置overflow:hidden，设置背景为想要显示的图标，它的宽度小于下拉框，用于隐藏下拉框原有小三角

2.让下拉框背景透明，用于显示出div上的图标

步骤：

1.给下拉框外围套一个div，设置它的背景色为你想要的下拉框背景色，设置背景图为下拉框右侧小图标，让它居div的右侧（right），设置width1，overflow:hidden

示例：

2.给下拉框设置背景透明，设置width2

3.使width1 > width2

4.示例：

html：

<div id="select_icon">

<select class="form_control">

<option>进行中</option>

<option>未解决</option>

</select>

</div>

css：

#select_icon {

width: 115px;

overflow: hidden;

background: url(../photo/down_gray.png)
no-repeat right;

}

.form_control {

height: 17px;

padding: 0px
12px;

border: none;

background: transparent;

width: 132px;

}

132 > 115

重点css：

背景透明（文字不透明）：

bacbackground: transparent;

如果设置opacity:0;

会使下拉框文字一块透明

方法二：

由于方法一有部分缺陷，所以补充一种方法：

用 bootstrap 的下拉菜单组件

1.首先会使用boostrap，飞的博客文章里有写，不再赘述。

2.引用boostrap下拉菜单组件的代码：

<div class="btn-group">

<button type="button" class="btn dropdown-toggle"
data-toggle="dropdown">
未解决
<span class="caret_img"></span>

</button>

<ul class="dropdown-menu" role="menu">

<li><a href="#">进行中</a></li>

<li><a href="#">未解决</a></li>

</ul>

</div>

注意这段代码：<span
class="caret_img"></span>

这段代码是替换下拉菜单右侧图标的，可以在CSS中设置想要的背景图片。

示例：

html代码：

<div class="btn-group">

<button type="button" class="btn
dropdown-toggle" data-toggle="dropdown">
未解决
<span class="caret_img"></span>

</button>

<ul class="dropdown-menu" role="menu">

<li><a href="#">进行中</a></li>

<li><a href="#">未解决</a></li>

</ul>

</div>

CSS代码：

.caret_img {

background: url(photo/down_gray.png)
no-repeat right;

width: 41px;

}

下面是飞的实践效果：

右侧图标：



下拉菜单效果：



如果想选取下拉菜单中每一项后，按钮中显示该项，可以用js实现，获取点击的下拉项值，将它赋值给按钮上的值。