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. 【Kruskal】Slim Span

    [Uva1395]Slim Span 题目略…… 试题分析:codevs1001舒适的路线上加一个判一下连通性就好,顺便把除改成减 代码: #include<iostream> #incl ...

  2. BZOJ 1042：[HAOI2008]硬币购物（容斥原理+DP）

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1042 [题目大意] 硬币购物一共有4种硬币.面值分别为c1,c2,c3,c4. 某人去 ...

  3. 【set】【链表】hdu6058 Kanade's sum

    f(l,r,K)表示区间l,r里面的K大值,问你所有连续子区间的f之和. l(i)表示i左侧第一个比它大的数的位置,r(i)表示i右侧第一个比它大的数的位置.可以用set处理出来. 把数从大到小排序, ...

  4. Android中Acition和Category常量表

    Action Action常量 对应字符串 简单说明 ACTION_MAIN android.intent.action.MAIN 应用程序入口 ACTION_VIEW android.intent. ...

  5. [NOIp2017提高组]逛公园

    题目大意: 给你一个有向图,若用dis(u,v)表示从u到v的最短路长度,求从1到n的长度不超过dis(1,n)+k的路径数. 思路: 首先分别预处理出以1,n为起点的单.源最短路. 对于合法的边重构 ...

  6. TCP连接 断开

     参考:http://blog.csdn.net/cyberhero/article/details/5827181 1.建立连接协议 (三次握手)      (1)客户端发送一个带SYN标志的TCP ...

  7. c/c++代码的unit-test中覆盖率的统计

    gcov lcov genhtml工具      gcov伴随gcc 发布.gcc编译加入-fprofile-arcs -ftest-coverage 参数生成二进制程序,执行测试用例生成代码覆盖率信 ...

  8. vscode快捷键－for mac

    默认显示当前所有页面: command p ?: 显示可操作方法 >: 打开命令面板, 同comand shift p : : 跳转到对应行数 @: 搜索并跳转到应变量或函数 @: : 同上,分 ...

  9. Android开发高级进阶——多进程间通信

    一. 什么是多进程? 多进程就是多个进程的意思,那么什么是进程呢? 当一个应用在开始运行时,系统会为它创建一个进程,一个应用默认只有一个进程,这个进程(主进程)的名称就是应用的包名. 进程的特点: 进 ...

  10. pytho文件命名不要内部模块或者引用模块名字相同

    自己写的包和模块,注意命名不要和python内置模块和包.以及引用的模块和包名字冲突