Почему в Bootstrap 5 опции выбора не отображаются нормально во всех браузерах?

Я сделал страницу, где пользователь должен выбрать опцию из выпадающего списка, где появляются другие пользователи, которые соответствуют критерию.

Почти во всех случаях он работает хорошо, но некоторые пользователи (они используют Chrome или Edge) сделали отзыв, что опции находятся в выпадающем списке, но текст имеет тот же цвет, что и фон, поэтому он появляется только при наведении на него, как на изображении ниже. enter image description here

В большинстве случаев все работает нормально и все названия отображаются. Я не использую никаких CSS, только Bootstrap 5 и Django.

<h3 class="mt-4">This is the questions label</h3>
    <select class="form-select" aria-label="" name="perf01a" id="perf01a">
        <option id="opt">nincs</option>
            {% for u in related_users %}
                 <option>{{ u.user_name.last_name }} {{ u.user_name.first_name }}</option>
            {% endfor %}
    </select>

    <select class="form-select" aria-label="" name="perf01b" id="perf01b">
        <option id="opt">nincs</option>
            {% for u in related_users %}
                 <option>{{ u.user_name.last_name }} {{ u.user_name.first_name }}</option>
            {% endfor %}
    </select>

    <select class="form-select" aria-label="" name="perf01c" id="perf01c">
        <option id="opt">nincs</option>
            {% for u in related_users %}
                 <option>{{ u.user_name.last_name }} {{ u.user_name.first_name }}</option>
            {% endfor %}
    </select>

Что мне делать?

Вернуться на верх