美化思路:首先用CSS代码将Select下拉框默认样式全部去掉,自己为下拉框定义样式;最重要的是下拉框的按钮,也需要用CSS代码隐藏,然后用图片来定义,这样就美观多了。
效果截图:
HTML代码:
<select class="form-control info-select">
<option selected="selected">1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
CSS代码:
.form-control {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
/* IE浏览器下隐藏下拉按钮 */
select::-ms-expand { display: none; }
/* 定义隐藏下拉框默认样式及图片覆盖下拉按钮 */
.info-select{
width: 200px;
outline:none;
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
-ms-appearance:none;
background: url(img/down.png) no-repeat scroll right center transparent;
}