使用 CSS 自定义下拉菜单 Select

Question

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

https://www.progressive.com/auto/

并且不知道如何使箭头在表单域中看起来像那样。谁能帮助或建议从哪里开始？

只是为了确认我只是在寻找按钮本身，而不是点击按钮后发生的事情。

jsfiddle:

    <label class="select-label">
            <select id="Type" class="size-select" name="customer_type">
<option value="" disabled selected>Please Select</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
            </select>
          </label>

CSS:

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

提前致谢！

Answer 1

您需要将以下代码添加到您的 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;
}

将 IMAGE_URL 替换为您要作为下拉箭头放置的图片来源。

这是 JSFiddle 的示例

使用 CSS 自定义下拉菜单 Select

Customize Dropdown Select with CSS

html

css

forms

dropdown