Question

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

https://github.com/OfficeDev/microsoft-graph-docs/issues/442

并且无法锻炼如何在表单字段上看到箭头。任何人都可以帮助或建议从哪里开始？

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

的jsfiddle：

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

    <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自定义下拉列表选择

1 个答案: