html5 下拉按钮样式修改,css和jquery实现的select美化自定义下拉框样式

select美化自定义下拉框样式

*{margin:0;padding:0;}

select{outline:none;}

ul{list-style:none;}

a{text-decoration:none;}

select{display: none;}

.select_box{font-family: "宋体"; font-size: 12px;color: #999999;width: 178px;line-height: 20px;margin: 50px auto;}

.select_showbox{border: 1px solid #b0a296;height: 20px;padding-left: 5px;background: url(/jscss/demoimg/201403/icon.png) no-repeat 156px 0;}

.select_option{border: 1px solid #b0a296;border-top: none;display: none;}

.select_option li{padding-left: 5px;}

.select_option li.selected{background-color: #F3F3F3;color: #999;}

.select_option li.hover{background: #7b6959; color: #fff;}

选择风格

复古风

摇滚风

怀旧风

(function($){

var selects=$('select');//获取select

for(var i=0;i

createSelect(selects[i],i);

}

function createSel