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 1711：[Usaco2007 Open]Dining吃饭（最大流）

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1711 [题目大意] 每头牛都有一些喜欢的饮料和食物, 现在有一些食物和饮料,但是每样只 ...

  2. 【递归】【线段树】【堆】AtCoder Regular Contest 080 E - Young Maids

    给你一个1~n的排列p,n是偶数,每次从中任选一对相邻的数出来,插到排列q的开头,如此循环,问你所能得到的字典序最小的排列q. 我们先确定q开头的两个数q1,q2,q1一定是p的奇数位的最小的数,而q ...

  3. python基础之生成器，三元表达式，列表生产式

    生成器 1.什么是生成器? 在函数内但凡出现yield关键字,再调用函数就不会执行函数体代码,会返回一个值,该值称为生成器. 生成器的本质就是迭代器. 2.为什么要用生成器? 生成器是一种自定义迭代器 ...

  4. Jenkins构建Maven多模块项目时，单独编译子模块，并且不触发构建其它模块

    一.Jenkins构建Maven多模块项目时,单独编译子模块 配置: 1.Root POM指向父pom.xml 2.Goals and options指定构建模块的参数:mvn -pl jsoft-w ...

  5. 解决marathon上docker实例一直waitting的问题

    可能原因: 1. mesos-slave上资源不够,一般是内存不够.可上mesos-master:5050上查看 2. 宿主机上没有镜像,一直在拉或拉不到.上宿主机上查看: docker images ...

  6. nyoj42一笔画问题（欧拉图）

    这题事实上说不上难度4.仅仅是一个简单的欧拉图推断,给一些点,首先推断连通性.假设不连通.就谈不上是欧拉图. 假设是连通的,在推断度的数目,每一个顶点都是偶数个或者仅仅有两个是奇数个.这样就能够构成欧 ...

  7. 【转载】Java 的开发效率究竟比 C++ 高在哪里？

    哈哈哈,太好笑了 https://www.zhihu.com/people/ze.ran ze ran编程话题优秀回答者 less is more 人赞同 C++是面向内存编程,Java是面向数据结构 ...

  8. 【笔记】js Array.prototype.slice.call(arguments) 将函数的参数转换为数组方法的见解

    我们知道函数里面的参数实际上是一个以数组形式储存的对象 但它并非一个数组 如果我们要将它转换为数组可以调用Array.prototype.slice() 这个方法 分析一下这个方法: Array.pr ...

  9. Android技术——在Android中的随意视图中找控件

    1.在非常多情况下,我们可能不知道控件的id,可是我们却希望在包括这个控件的视图中找到它,能够採用例如以下做法: 例:在Activity的根视图中找出当中全部的Button控件 private voi ...

  10. 我的mini_c语言文法设计

    //这个文件主要是用来描述当前源语言的词法结构和语法结构 //当前语言是c语言的一个子集,因此里面所有的描述大家都很熟悉 //注意,当前语言并不支持预处理,因为c预处理比较复杂,而且楼主能力低下,因此 ...