各个浏览器下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. python urllib使用

    Urllib是python内置的HTTP请求库包括以下模块urllib.request 请求模块urllib.error 异常处理模块urllib.parse url解析模块urllib.robotp ...

  2. 【codevs1404】字符串匹配 KMP

    题目描述 给你两个串A,B,可以得到从A的任意位开始的子串和B匹配的长度.给定K个询问,对于每个询问给定一个x,求出匹配长度恰为x的位置有多少个.N,M,K<=200000 输入 第一行三个数 ...

  3. 【bzoj1672】[USACO2005 Dec]Cleaning Shifts 清理牛棚 dp/线段树

    题目描述 Farmer John's cows, pampered since birth, have reached new heights of fastidiousness. They now ...

  4. Codeforces Round #521 Div. 3 玩耍记

    A:签到. #include<iostream> #include<cstdio> #include<cmath> #include<cstdlib> ...

  5. 51nod1469 淋漓字符串（后缀自动机）

    题目大意: 首先,我们来定义一下淋漓尽致子串. 1.令原串为S. 2.设子串的长度为len,在原串S中出现的次数为k,令其出现的位置为p1, p2, ....pk(即这个子串在原串中[pi,pi + ...

  6. 【题解】51nod1967 路径定向

    第一次写欧拉回路,实际上只要dfs下去就可以了,反正每条边都是要遍历一遍的…… 关键有两个性质:1.一个无向图存在欧拉回路,当且仅当该图所有顶点度数都为偶数,且该图是连通图.2.一个有向图存在欧拉回路 ...

  7. [洛谷P1552][APIO2012]派遣

    题目大意:有一棵$n$个点的树,和一个费用$m$,每个点有一个费用和价值,请选一个点,再从它的子树中选取若干个点,使得那个点的价值乘上选的点的个数最大,要求选的点费用总和小于等于$m$ 题解:树形$d ...

  8. PCA误差

    我们知道,PCA是用于对数据做降维的,我们一般用PCA把m维的数据降到k维(k < m). 那么问题来了,k取值多少才合适呢? PCA误差 PCA的原理是,为了将数据从n维降低到k维,需要找到k ...

  9. BZOJ5290 & 洛谷4438：[HNOI/AHOI2018]道路——题解

    https://www.lydsy.com/JudgeOnline/problem.php?id=5290 https://www.luogu.org/problemnew/show/P4438 的确 ...

  10. BZOJ3680 & 洛谷1337：[JSOI2004]平衡点/吊打XXX——题解

    https://www.lydsy.com/JudgeOnline/problem.php?id=3680 https://www.luogu.org/problemnew/show/P1337 有n ...