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. BZOJ 4653 [Noi2016]区间（Two pointers+线段树）

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=4653 [题目大意] 在数轴上有n个闭区间 [l1,r1],[l2,r2],...,[l ...

  2. 【并查集】Gym - 101128B - Black Vienna

    有26张牌(A~Z),其中三张被拿走了.其余23张被分发给了两个人.给你m次调查结果,一次调查结果是对其中一个人询问一对牌,他会告诉你他有这对牌的几张(0~2).问你有多少种被拿走的牌的组合. 三重循 ...

  3. Java并发（四）：happens-before

    happens-before 一个操作执行的结果需要对另一个操作可见,那么这两个操作之间必须存在happens-before关系 happen-before原则是JMM中非常重要的原则,它是判断数据是 ...

  4. mybatis批量插入：oracle和mysql的区别

    一.oracle批量插入 <insert id="save" parameterType="java.util.List"> insert into ...

  5. Failed to Attach to Process ID Xcode 解决办法

    方法1. go to the Product menu and find the Edit Scheme menu there. While in Edit Scheme window, select ...

  6. <摘录>linux 默认的include

    #include <linux/module.h> 中的module.h默认是在哪个目录下呢?我在/usr/include/linux下并没有找到这个文件. 另外想问一下,不同内核版本的l ...

  7. 第七章Openwrt安装服务器环境php+uhttpd+mysql

    在前面的文章中刷openwrt.配置网络环境.挂载u盘都配置成功了之后,下面的操作就变得简单起来!!!! 1. putty连接到路由器 2. 安装php opkg install php5-fastc ...

  8. easyui-combobox绑定回车事件注意事项

    回车事件的定义的位置必须是easyui-combobox数据加载的后面,才有效果. HTML文件: <select id="aucBrandNo" class="e ...

  9. 把自动机用作 Key-Value 存储

    以前只有代码,最近简单写了一点文档: google code 上的链接(总是最新) 自动机是什么 DFA 的最小化 将 DFA 用做字典 无环DFA (ADFA, Acyclic DFA) 编译 内存 ...

  10. os.waitpid()无法获取sys.exit()退出时的status code

    [目的] 父进程使用os.waitpid()等待子进程退出,并检测子进程的exit code,以决定是否重启子进程. (常见的应用场景是:子进程接收外部命令,收到"stop"时退出 ...