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

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  {

1. width: 115px;
2. overflow: hidden;
3. background: url(../photo/down_gray.png) no-repeat right;

}

.form_control  {

1. height: 17px;
2. padding: 0px 12px;
3. border: none;
4. background:  transparent ;
5. 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  {

1. 1. background: url(photo/down_gray.png) no-repeat right;
   2. width: 41px;
   }

下面是飞的实践效果：

右侧图标：

下拉菜单效果：

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