html - 如何在选择输入框内放置网站图标

Question

我试图在我的下拉框中插入一个 fa-chevron 图标，但它不起作用，它显示在框外。

我试过更改页边距，但这不起作用。

这是当 margin-right 设置为 200 时:

这是没有边距的:

代码:

<div class="col-md-8 d-flex" style="margin-top: -25px">
    <select name="carlist" form="carform" class="form-control" id="exploreNeighbour" style="z-index: 2">
        <option value="">I have no idea</option>
        {% for venue in venue_category %}
        <option value="{{ venue.name }}">{{ venue.name }}</option>
        {% endfor %}
    </select>
    <i class="fas fa-chevron-down" style="pointer-events: none; z-index: 1; margin-right: 20px"></i>
</div>

Answer 1

添加 z-index: 2;和左边距:-20px；到 fa-chevron-down