htmlselect样式t调整_通过css修改select下拉列表框的默认样
式
实现原理很简单，就是通过把浏览器默认的下拉框样式清除，⾃定义select样式，再把默认的下拉按钮替换为张向右对齐的⼩箭头图标即可，具体代码如下。
select {
/*Chrome和Firefox⾥⾯的边框是不⼀样的，所以复写了⼀下*/
border: solid 1px #000;
/*很关键：将默认的select选择框样式清除*/
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
/*在选择框的最右侧中间显⽰⼩箭头图⽚*/
background: url("ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent;
/*为下拉⼩箭头留出⼀点位置，避免被⽂字覆盖*/
html下拉菜单的制作方法
padding-right: 14px;
}
/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
select::-ms-expand { display: none; }
IE9以下浏览器：
IE9以下的旧版本IE浏览器并不⽀持appearance属性，想要⽀持的话需要⾮常特殊的⽅法： 为其添加⼀个⽗容器，容器是⽤来覆盖⼩箭头的，然后为select添加⼀个向右的⼩偏移或者宽度⼤于⽗级元素。设置⽗级的CSS属性为超出部分不可见，即可覆盖即⼩箭头。然后再为⽗级容器添加背景图⽚即可。overflow: hidden并不能隐藏下拉框的显⽰。
HTML代码：
what
the
hell
CSS代码：
#parent {
background: url('yourimage') no-repeat;
width: 100px;
height: 30px;
overflow: hidden;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。