ie上的下拉框下拉按钮真是太丑了，如何把他自定义一下呢？

首先，把浏览器自带的下拉框去掉：  select::-ms-expand { display: none; }

接下来，用自己喜欢的下拉图片去替换：

select {
            padding-right:20px;
            color:#a7bce3;
            appearance:none;
            -moz-appearance:none;
            -webkit-appearance:none;
            background: rgba(21, 81, 176, 0.89) url("../../../app/img/select-icon.png") no-repeat scroll right center;
        }

不过ie上比较奇葩，虽然改后样式看起来统一了，但是点开下拉框后，鼠标滑倒每一个option上，那颜色应该是浏览器自己添加的，我这个背景色，浏览器给配的颜色是这样的：

所以，这个方法并不能策划地解决下拉框样式的问题，要想彻底解决，就是用、ul li来模拟下拉框。

展示如下：

代码如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>案例测试</title>

<script type="text/javascript" src="jquery.1.7.2.min.js"></script>

<style>

/* 公共样式 */

* { padding: 0; margin: 0; list-style: none; font-size: 14px; }

.hide { display: none; }

input { outline: none; }

/* 模拟下拉框 */

.select { position: relative; margin: 50px 0 0 100px; }

.select .input_in input { width: 188px; height: 20px; line-height: 20px; padding: 10px 0 10px 10px; border: 1px solid #d6d6d6; cursor: pointer; }

.select .city { position: absolute; top: 40px; left: 0; }

.select .city ul { width: 198px; border: 1px solid #d6d6d6; border-top: none; }

.select .city ul li { padding-left: 10px; width: 188px; height: 40px; line-height: 40px; cursor: pointer; }

</style>

</head>

<body>

<!-- End 模拟下拉框 -->

<div class="select">

    <div class="input_in">

        <input type="text" value="D.C" />

    </div>

    <div class="city hide">

        <ul>

            <li>New York1</li>

            <li>New York2</li>

            <li>New York3</li>

            <li>New York4</li>

            <li>New York5</li>

            <li>New York6</li>

        </ul>

    </div>

</div>

<!-- End 模拟下拉框 -->

<script type="text/javascript" >

    $(function(){

//模拟下拉框

    $('.select input').on('click',function(){

        if($('.select .city').is('.hide')){

            $('.select .city').removeClass('hide');

        }else{

            $('.select .city').addClass('hide');

        }

    })

    $('.select ul li').on('click',function(){

        $('.select input').val($(this).html());

        $('.select .city').addClass('hide');

        $('.select input').css('border-bottom','1px solid $d6d6d6');

    })

    $('.select ul li').hover(

        function(){

            $(this).css({'backgroundColor':'#fd9','font-size':'18px'});

        },function(){

            $(this).css({'backgroundColor':'#fff','font-size':'14px'});

        }

    )

})

</script>

</body>

</html>

最好再给下拉按钮做上个下拉图标，那就完美了。

修改select下拉框的下拉按钮的更多相关文章

  1. 使用jQuery为文本框、单选框、多选框、下拉框、下拉多选框设值及返回值的处理

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  2. 转：控制ComboBox下拉框的下拉部分宽度，使内容能够显示完全

    一般的情况下,如果下拉框的选项的文字太长,下拉框ComboBox的Width宽度属性我们又不想要改变(默认不变),下拉选项的文字内容就会被截剪,如下图所示: 解决办法: 1.自动判断下拉选项的文字长度 ...

  3. 下拉框、下拉控件之Select2。自动补全的使用

    参考链接: 参考一:https://blog.csdn.net/weixin_36146275/article/details/79336158 参考二:https://www.cnblogs.com ...

  4. select下拉框获取下拉项值的问题

    新发现: select option如果里面不写value值,默认提交<option></option>中间的值. 切记:真正提交的值写在value属性里面,option之间只 ...

  5. 下拉框、下拉控件之Select2

    一.Select2的功能简介 select2插件给我们带来了更加友好的交互方式,比如查询控件展开后可通过关键字进行检索 例如: Select2也可以选择带查询控件的选择框... Select2也可以选 ...

  6. html之多行文本textarea 及下拉框select（12）

    1.多行文本 多行文本使用textarea标签,默认值需要写在中间,和input标签不同,name属性用于后台获取数据(request.POST.get(meno)) <body> < ...

  7. jQuery处理下拉框（Select、radio、checkbox等）代码

    //遍历option和添加.移除option <script> function changeShipMethod(shipping){ var len = $("select[ ...

  8. 纯原生javascript下拉框表单美化实例教程

    html的表单有很强大的功能,在web早期的时候,表单是页面向服务器发起通信的主要渠道.但有些表单元素的样式没办法通过添加css样式来达到满意的效果,而且不同的浏览器之间设置的样式还存在兼容问题,比如 ...

  9. 用MVC的辅助方法自定义了两个控件：“可编辑的下拉框控件”和“文本框日历控件”

    接触MVC也没多长时间,一开始学的时候绝得MVC结构比较清晰.后来入了门具体操作下来感觉MVC控件怎么这么少还不可以像ASP.net form那样拖拽.这样设计界面来,想我种以前没学过JS,Jquer ...

随机推荐

  1. [Contest20170910]string

    给定一个由且仅由字符$'H','T'$构成的字符串$S$ 给定一个最初为空的字符串$T$,每次随机地在$T$的末尾添加$'H'$或者$'T'$ 问当$S$为$T$的后缀时,在末尾添加字符的期望次数 妙 ...

  2. 【后缀自动机】hdu6194 string string string

    题意:给你一个字符串和一个正整数K,让你输出恰好出现K次的子串的数量. 对后缀链接树进行dp预处理后,SAM每个点的endpos大小就是该点结尾的子串出现的次数,maxlen-minlen+1就是子串 ...

  3. 【DFS】POJ3009-Curling 2.0

    [题目大意] 给出一张地图,一旦往一个方向前进就必须一直向前,直到一下情况发生:(1)碰到了block,则停在block前,该block消失:(2)冲出了场地外:(3)到达了终点.改变方向十次以上或者 ...

  4. (疯狂java)第四课(上)

    趁着周末玩爽了,兴致来了,继续玩玩java(估计再玩下去,就要被java玩了),第六章实在是很长,那就两个阶段来看吧. 1.java 7的增强包装类 这些包装类就是java上的基本类型,只不过人人基本 ...

  5. Spring beans.xml

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...

  6. 统计个位数的数目 Exercise07_07

    /** * @author 冰樱梦 * 时间:2018年下半年 * 题目:统计个位数的数目 * */ public class Exercise07_07 { public static void m ...

  7. 20172333 2017-2018-2 《Java程序设计》第3周学习总结

    20172333 2016-2017-2 <Java程序设计>第3周学习总结 教材学习内容总结 1.String类.Random类.Math类.NumberFormat类和DecimalF ...

  8. 使用webclient上传下载实例

    转载:http://blog.csdn.net/kevonz/article/details/5078432 using System; using System.Collections.Generi ...

  9. Android学习进阶路线导航线路(Android源码分享)

                                                                                                       转 ...

  10. HTTPS 信任证书

    使用HttpsURLConnection访问HTTPS链接时一般需要引入证书,否则会产生异常. 但是也可以使用信任所有证书的方式来达到访问的目的. 经上网查询资料发现一个很好用的类来实现信任所有证书的 ...