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 2809 [Apio2012]dispatching（斜堆+树形DP）

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=2809 [题目大意] 给出一棵树,求出每个点有个权值,和一个乘算值,请选取一棵子树, 并 ...

  2. [xsy2282]cake

    题意:一个$n\times n$的有标号点阵,现在用一条直线把它们分成两部分,问有多少种不同的分法 结论:方案数就是以点阵上的点为端点且不经过第三个点的线段数 对一个满足要求的线段,将其绕中点顺时针转 ...

  3. 【折半枚举】Ural Championship April 30, 2017 Problem G. Glasses with solutions

    题意:有n杯盐溶液,给定每杯里面盐的质量以及盐溶液的质量.问你有多少种方案选择一个子集,使得集合里面的盐溶液倒到一个被子里面以后,浓度为A/B. 折半枚举,暴力搜索分界线一侧的答案数,跨越分界线的答案 ...

  4. 【动态规划】【二分】CDOJ1006 最长上升子序列

    最长上升子序列. 要求输出字典序最小解. 就在更新答案的时候记录一下前驱.容易发现记录的这个玩意实际上形成了一个森林. #include<cstdio> #include<algor ...

  5. bzoj 1236: longpo的回文

    1236: longpo的回文 题目描述 一个字符串如果从左到右和从右到左读的结果是一样的,我们称之为回文串.现在给定一个字符串,我们有三种操作: 1.     添加一个字母在任何位置(可以在首尾添加 ...

  6. 20162307 实验四 Android程序设计

    实验四 <Android程序设计> 北京电子科技学院(BESTI) 实 验 报 告 课程:程序设计与数据结构 班级:1623 姓名:张韵琪 学号:20162307 指导教师:娄佳鹏老师.王 ...

  7. CSS3新增

    1 CSS3 的选择器 1.1 基本选择器 tagName .className #idName * slector,selector,selector 1.2 层级选择器 selector1 sel ...

  8. Ubuntu 16.04搭建原始Git服务器

    说明:不要把有限的生命浪费到权限斗争中! 1.安装SSH sudo apt-get install openssh-server sudo service ssh start 2.安装Git sudo ...

  9. HDU 4662 MU Puzzle (2013多校6 1008 水题)

    MU Puzzle Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total S ...

  10. 【系统自启动】使用windows自带工具管理开机启动项

    1.windows+R,键入:msconfig 2.进入启动选项卡 3.将不用自启动的选项 取消勾选即可 点击应用,重启电脑即可