您的位置：首页 > Web前端 > CSS

css修改select默认样式

2017-08-04 11:41 645 查看

先来看看效果图：

css：

<style media="screen">
.select_demo,
.select_list {
width: 400px;
height: 60px;
}

.select_demo {
background-color: #fbe4e8;
}

.select_list {
border: solid 2px #96cffd;
font-size: 30px;
padding-left: 20px;
/*很关键：将默认的select选择框样式清除*/
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
/*在选择框的最右侧中间显示小箭头图片*/
background: url("chevron_down.png") no-repeat scroll right center transparent;
background-position-x: 330px;
}

/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
select::-ms-expand {
display: none;
}
</style>

html：

<body>
<div class="select_demo">
<select class="select_list">
<option value="0">请选择</option>
<option value="1">香蕉</option>
<option value="2">火龙果</option>
<option value="3">圣女果</option>
<option value="4">南非无籽红提</option>
<option value="5">菲律宾帝皇蕉</option>
</select>
</div>
</body>

右侧图标：

也可以自己在：图标上选择自己喜欢的图标。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航