html下拉选择框箭头改为年,纯css样式改变select选择框的默认样式(改变默认箭头)...

实现方法一：使用appearance: none属性

源码如下：

select {

margin: 50px;

border: 1px solid #111;

background: transparent;

width: 150px;

padding: 5px 35px 5px 5px;

font-size: 16px;

border: 1px solid #ccc;

height: 34px;

-webkit-appearance: none;

-moz-appearance: none;

appearance: none;

background: url(http://www.stackoverflow.com/favicon.ico) 96% / 15% no-repeat #eee;

}

/* CAUTION: IE hackery ahead */

select::-ms-expand {

display: none; /* remove default arrow in IE 10 and 11 */

}

/* target Internet Explorer 9 to undo the custom arrow */

@media screen and (min-width:0\0) {

select {

background:none\9;

padding: 5px\9;

}

}

Apples

Pineapples

Chocklate

Pancakes

第二种方法：为select元素设置宽度并使用overflow:hidden以隐藏默认箭头

代码如下：

.styled select {

background: transparent;

width: 150px;

font-size: 16px;

border: 1px solid #ccc;

height: 34px;

}

.styled {

margin: 50px;

width: 120px;

height: 34px;

border: 1px solid #111;

border-radius: 3px;

overflow: hidden;

background: url(http://www.stackoverflow.com/favicon.ico) 96% / 20% no-repeat #eee;

}

Pineapples

Apples

Chocklate

Pancakes

方法三：使用css pointer-events属性

代码如下：

.notIE {

position: relative;

display: inline-block;

}

select {

display: inline-block;

height:30px;

width: 150px;

padding: 2px 10px 2px 2px;

outline: none;

color: #74646e;

border: 1px solid #C8BFC4;

border-radius: 4px;

box-shadow: inset 1px 1px 2px #ddd8dc;

background: #fff;

}

/* Select arrow styling */

.notIE .fancyArrow {

width: 23px;

height: 28px;

position: absolute;

display: inline-block;

top: 1px;

right: 3px;

background: url(http://www.stackoverflow.com/favicon.ico) right / 90% no-repeat #fff;

pointer-events: none;

}

/*target Internet Explorer 9 and Internet Explorer 10:*/

@media screen and (min-width:0\0) {

.notIE .fancyArrow

{

display:none;

}

}

Apples

Pineapples

Chocklate

Pancakes