html - 添加图标以选择下拉菜单

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;
}

选择有一个相对位置集。

谢谢

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>