【发布时间】:2014-11-30 16:24:52
【问题描述】:
如何更改颜色下拉选择器列表。
设计问题。
【问题讨论】:
如何更改颜色下拉选择器列表。
设计问题。
【问题讨论】:
您可以使用 CSS 实现这一点,但您并没有在技术上更改箭头本身。
在这个例子中,我实际上隐藏了默认箭头并显示了我自己的箭头。
HTML:
<div class="styleSelect">
<select class="units">
<option value="Metres">Metres</option>
<option value="Feet">Feet</option>
<option value="Fathoms">Fathoms</option>
</select>
</div>
.styleSelect select {
background: transparent;
width: 168px;
padding: 5px;
font-size: 16px;
line-height: 1;
border: 0;
border-radius: 0;
height: 34px;
-webkit-appearance: none;
color: #000;
}
.styleSelect {
width: 140px;
height: 34px;
overflow: hidden;
background: url("images/downArrow.png") no-repeat right #fff;
border: 2px solid #000;
}
【讨论】: