各个浏览器下select默认的下拉箭头差别较大，通常会清除默认样式，重新设计

<html>

  <head>

	<meta charset="utf-8"></meta>

	</head>

  <style>

.bar{

	width:400px;

	height:50px;

}

.labelSelect{

	width:80px;

	height:50px;

	line-height:50px;

	display:inline-block;

}

.mySelect{

	width:300px;

	height:50px;

	border:1px solid #ccc;

	display:inline-block;

}

/* --ie清除--*/

select::-ms-expand{ display: none; }

select{

　　border: 1px solid #E9E9E9;

　　appearance:none;//将默认的select选择框样式清除

　　-moz-appearance:none;

　　-webkit-appearance:none;

　　background: url("arrowDown.png") no-repeat scroll right center transparent;//在选择框的最右侧中间显示小箭头图片

　　padding-right: 20px; //为下拉小箭头留出一点位置，避免被文字覆盖
}

</style>

<body>

　　<div class="bar">

　　　　<div class="labelSelect">性别</div>

　　　　<select class="mySelect">

　　　　　　<option>男</option>

　　　　　　<option>女</option>

　　　　</select>

　　</div>

</body>

</html>

css下啊使用appearance除去select中的箭头样式，而ie下需要用select::-ms-expand{ display: none; }方能去掉，去掉箭头以后通过设置背景颜色，给select添加统一的箭头，这样所有浏览器下的select箭头样式就保持一致了，效果如图所示

　

但是ie8/9下并不适用，这种情况下则需要使用css+图片+javascript来模拟下拉菜单

select下拉箭头改变，兼容ie8/9的更多相关文章

  1. html select 下拉箭头隐藏

    html select 下拉箭头隐藏 <!DOCTYPE html> <html> <head lang="en"> <meta char ...

  2. select默认下拉箭头改变、option样式清除

    谷歌.火狐.ie下 select 的默认下拉箭头图标差别还是比较大,一般我们都会清除默认样式,重新设计箭头图标: /* --ie清除--*/ select::-ms-expand{ display: ...

  3. select下拉箭头样式重置

    select{ appearance:none; -moz-appearance:none; -webkit-appearance:none; background: url("../ima ...

  4. Layui select下拉框改变之 change 监听事件（转）

    在layui中使用 jquery 触发select 的 change事件无效 使用layui.use监听select事件 <select lay-filter="demo" ...

  5. CSS-解决苹果点击高亮、安卓select灰色背景（select下拉框在IOS中背景变黑、出现阴影问题）

    1.在苹果手机上,用点击事件后会出现一个高亮的阴影: 面对click事件的阴影,解决办法: *{ -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit ...

  6. select change下拉框改变事件 设置选定项，禁用select

    select change下拉框改变事件 设置选定项,禁用select 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...

  7. 清除Css中select的下拉箭头样式

    select {/*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/border: solid 1px #000; /*很关键:将默认的select选择框样式清除*/appeara ...

  8. select下拉框右对齐，去掉箭头，替换箭头

    右对齐 select{ width:auto; direction: rtl; } select option { direction: ltr; } 去掉箭头(不设置背景色会有灰色背景) selec ...

  9. 怎么去掉select的下拉箭头和输入框input类型为number时的上下箭头

    一.去掉select的下拉箭头 方法一:在select外面加一个div,设置select宽度大于div的宽度,并加一个超出隐藏属性overflow:hidden,小三角会隐藏掉: 方法二:给selec ...

随机推荐

  1. 如何彻底解决adb 5037端口被占用

    在进行安卓开发的时候是不是经常碰到adb端口被占用的情况? 解决这个问题的方法很简单,只需要设置一个系统环境变量就可以搞定. 设置方法: 增加系统环境变量变量名称:ADNROID_ADB_SERVER ...

  2. 自定义JS Map 函数

    // 自定义JS Map 函数 function Map() { var map = function (key, value) {//键值对 this.key = key; this.value = ...

  3. 修改MSSQL字段类型

    update Data_Project set SyncTime=NULL; alter table Data_Project alter column SyncTime datetime; upda ...

  4. [OS] 进程互斥

    对互斥的正确软件实现算法(面包店算法)是非常耗时的,现代的计算机系统都会提供简单的硬件指令,使用这些指令能够有效地解决临界区问题. 硬件提供一个TestAndSet指令,来实现原子指令的功能: boo ...

  5. 当线程是继承Thread时候 实现方法是静态方法时候 可以用锁修饰静态方法 此时锁对象是类 为啥继承的线程要用 类对象呢 因为他能生成很多实例 接口实现为啥用this 呢因为他就一个

  6. 【bzoj4196】[Noi2015]软件包管理器 树链剖分+线段树

    题目描述 Linux用户和OSX用户一定对软件包管理器不会陌生.通过软件包管理器,你可以通过一行命令安装某一个软件包,然后软件包管理器会帮助你从软件源下载软件包,同时自动解决所有的依赖(即下载安装这个 ...

  7. BZOJ4245 ONTAK2015 OR-XOR（贪心）

    贪心的按位考虑.如果所有数在某一位上有奇数个为1,显然无论如何划分这一位最终都会为1:否则将每一部分都划分为偶数个1就能保证最终该位为0,可以标记上哪些位置可以作为划分点(当然也要满足之前可为0的位上 ...

  8. hdu 1851（A Simple Game）（sg博弈）

    A Simple Game Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/65535 K (Java/Others)Tot ...

  9. BZOJ4539 [Hnoi2016]树 【倍增 + 主席树】

    题目链接 BZOJ4539 题解 我们把每次复制出来的树看做一个点,那么大树实际上也就是一棵\(O(M)\)个点的树 所以我们只需求两遍树上距离: 大树上求距离,进入同一个点后在模板树上再求一次距离 ...

  10. bzoj2165: 大楼(倍增floyd)

    题目大意:一个有向图,n(<=100)个点求一条长度>=m(<=10^18)的路径最少经过几条边. 一开始以为是矩乘,蓝鹅当时还没开始写,所以好像给CYC安利错了嘿嘿嘿QWQ 第一眼 ...