Html 使用CSS自定义下拉选择

我试图让我的下拉按钮看起来像这样：

无法训练如何在表单字段中使箭头看起来像那样。有人能帮忙或建议从哪里开始吗

我只是想确认一下，我只是在寻找按钮本身，而不是它被点击后会发生什么

jsfiddle：

---

提前谢谢

您需要将以下代码添加到CSS中

.selectParent select {
border-color: #979797;
border-style: solid;
border-width: 1px;
width: 250px;
margin-left: 10px;
height: 50px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
background: url("IMAGE_URL") no-repeat 235px center #fff;
}

将图像URL替换为要放置为下拉箭头的图像源

下面是一个例子

select {
background-color: #fff;
border-color: #979797;
border-style: solid;
border-width: 1px;
width: 250px;
margin-left: 10px;
height: 50px;
}

.selectParent select {
border-color: #979797;
border-style: solid;
border-width: 1px;
width: 250px;
margin-left: 10px;
height: 50px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
background: url("IMAGE_URL") no-repeat 235px center #fff;
}