添加图标以选择下拉列表

Question

我试图在选择组的末尾添加一个图标。我已经对伪元素进行了定位，但我无法看到它。

标记：

<select id="signup-sector" name="signup-sector" class="signup-select">
                        <option value="sector">Sector</option>
                        <option value="volvo">Volvo</option>
                        <option value="saab">Saab</option>
                        <option value="mercedes">Mercedes</option>
                    </select>

CSS：

select.signup-select::after {
    content: "\f107;";
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 20px;
    color: black;
}

select具有位置相对设置。

由于

Answer 1

这是我做的，试试这个.. 希望这可以帮助你...

.signup-select:after {
    content: "";
    position: absolute;
    right: 10px;
    top: 3px;
    width: 0; 
    height: 0; 
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #333;
}

<select id="signup-sector" name="signup-sector" class="signup-select">
                        <option value="sector">Sector</option>
                        <option value="volvo">Volvo</option>
                        <option value="saab">Saab</option>
                        <option value="mercedes">Mercedes</option>
                    </select>