select 下拉美化 css+html

用cssselect下拉框的美化这个可以换种方式实现，首先select的样式每个浏览器都有其默认的样式，需要先去除这些默认样式，其次，select里面的样式诸如箭头，下拉框等等的样式，这里提供一种思路，就是在select的外层添加一个div，对这个div元素设置样式，select元素则是没样式，从而达到一种掩眼法的效果，实现方式如下：<!-- html 布局 --><div id="selectStyle"><select id="select"><option>option 1</option><option>option 2</option><option>option 3</option><option>option 4</option><option>option 5</option></select></div>

首先要去掉 #select 的默认样式：/* 去掉默认样式，设置新的样式 */#select{display:block;width:100%;height:100%;box-sizing:border-box;background:none;border:1px solid #222;outline:none;-webkit-appearance:none;padding:0 5px;line-height:inherit;color:inherit;cursor:default;font-size:14px;position:relative;z-index:3;}#select option{color:#222;}#select option:hover{color:#fff;}#select option:checked{background:#535353;color:#fff; }

然后在外层div#selectStyle设置自定义样式#selectStyle{display:block;margin:0 auto;overflow:hidden;height:30px;width:240px;border-radius:0;background:#535353 url("箭头图片地址") right center no-repeat;background-size:auto 80%;color:#fff;line-height:2;/* 如果不想加图片，则可以设置一个自己的三角形样式，如下的自定义方式，见代码1 */position:relative;z-index:1;}/* 代码1 */#selectStyle:before{position:absolute;z-index:1;top:50%;right:10px;margin-top:-2.5px;display:block;width:0;height:0;border-style:solid;border-width:5px 5px 0 5px;border-color:#fff transparent transparent transparent;content:"";}/* 代码1 */#selectStyle:after{position:absolute;z-index:1;top:50%;right:10px;margin-top:-3.5px;display:block;width:0;height:0;border-style:solid;border-width:5px 5px 0 5px;border-color:#535353 transparent transparent transparent;content:"";}

以上就是自定义select样式的方法；同时也可以完全不要select这个元素使用div+css来自定义一个跟select一样效果的下拉框（需要Javascript辅助）。