Question

尝试使用下拉箭头的图像设置表单上的select元素的样式。不知道这是否可行。

Answer 1

将此样式添加到

.styled-select {
   background: url(new_arrow.png) no-repeat right #fff;
}

来源：http://bavotasan.com/2011/style-select-box-using-only-css/

Answer 2

使用CSS设置样式并使用指针事件：

<label>
<select>
   <option value="0">Zero</option>
   <option value="1">One</option>
</select>
</label>

并且相对CSS是

label:after {
    content:'\25BC';
    display:inline-block;
    color:#000;
    background-color:#fff;
    margin-left:-17px;   /* remove the damn :after space */
    pointer-events:none; /* let the click pass trough */
}

如果你愿意，可以使用带有图像背景的块，我只是在这里使用向下箭头。这是一个丑陋的小提琴样本：https://jsfiddle.net/1rofzz89/

如何用css替换<select>元素上的箭头按钮？</select>

2 个答案: