實現效果:
樣式一:去除邊框和下拉三角形,自定義下拉三角形
下拉三角形圖片獲取
代碼實現:
HTML代碼
<div class="com-sel">
<select class="com-opt">
<option value="">食宿</option>
<option value="">包吃住</option>
<option value="">包吃</option>
<option value="">包住</option>
</select>
</div>
CSS代碼
.com-sel { line-height: 5rem; cursor: pointer; /*鼠標上移變成小手*/ }
.com-opt { padding-right: 1.8rem; color: #afbac0; font-size: 1.6rem; border: none; outline: none; /*去掉默認的下拉三角*/ appearance:none; -moz-appearance:none; -webkit-appearance:none; /*添加下拉三角圖標*/ background: url("../img/task5-2_07.jpg") no-repeat right center transparent; }
樣式二: 去除默認三角形添加自定義圖片
圖片獲取
代碼實現:
HTML代碼
<div class="com-sel">
<select class="com-opt">
<option value="">查看詳情</option>
<option value="">方形</option>
<option value="">圓形</option>
<option value="">錐形</option>
</select>
</div>
CSS代碼
.com-sel { line-height: 3rem; cursor: pointer; /*鼠標上移變成小手*/ }
.com-opt { width: 10%; color: #999; /*去掉默認的下拉三角*/ appearance:none; -moz-appearance:none; -webkit-appearance:none; /*添加下拉三角圖標*/ background: url("../img/tranger.jpg") no-repeat right center transparent; }