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

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. width115px;
  2. overflowhidden;
  3. backgroundurl(../photo/down_gray.png) no-repeat right;
}
.form_control {
  1. height17px;
  2. padding0px 12px;
  3. bordernone;
  4. backgroundtransparent;
  5. width132px;
}

132 > 115

重点css:
背景透明(文字不透明):
bacbackgroundtransparent;
如果设置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. backgroundurl(photo/down_gray.png) no-repeat right;
    2. width41px;
}
下面是飞的实践效果:
右侧图标:

下拉菜单效果:


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

阅读更多
个人分类: html
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭