html中自定义select标签,CSS自定义select选择框的样式

兼容各个浏览器的select的样式：

* {

margin: 0;

padding: 0;

}

body {

padding: 100px 100px;

}

.btn-select {

position: relative;

display: inline-block;

width: 150px;

height: 25px;

background-color: #f99;

font: 14px/20px "Microsoft YaHei";

color: #fff;

}

.btn-select .cur-select {

position: absolute;

display: block;

width: 150px;

height: 25px;

line-height: 25px;

background: #f99 url(ico-arrow.png) no-repeat 125px center;

text-indent: 10px;

}

.btn-select:hover .cur-select {

background-color: #faa;

}

.btn-select select {

position: absolute;

top: 0;

left: 0;

width: 150px;

height: 25px;

opacity: 0;

filter: alpha(opacity: 0;);

font: 14px/20px "Microsoft YaHei";

color: #f99;

}

.btn-select select option {

text-indent: 10px;

}

.btn-select select option:hover {

background-color: #f80;

color: #fff;

}

请选择

选项一

选项二

选项三

选项四

选项五

选项六