Почему мой фон автозаполнения jQuery прозрачный?

Question

Я использую Автозаполнение DevBridge , и оно прекрасно работает, но я не понимаю, почему предложения отображаются на прозрачном фоне.

Я супер ужасен во внешнем интерфейсе, поэтому я не понимаю, почему редактирование файла CSS, как в следующей статье, не работает для меня:

• JQuery прозрачный раскрывающийся список автозаполнения

Мой HTML:

<!-- Own CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/custom_css.css') }}">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.

<form id="new_order" method="post" action="{{ url_for('summary') }}">
<div class="form-group col-sm" id="fruit">
  <input type="text" class="form-control" name="fruit_name" id="fruit_name">fruit_name<br>
  <button type="submit" class="btn btn-primary" form="new_order" id="new_order_summary">Summarise</button>
</div>
</form>

<!-- JQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- jQuery Autocomplete: https://github.com/devbridge/jQuery-Autocomplete-->
<script type="text/javascript" src="{{ url_for('static', filename='js/jquery.autocomplete.min.js', version=rnd) }}"></script>
<!-- own JS file -->
<script type="text/javascript" src="{{ url_for('static', filename='js/own_js_file.js', version=rnd) }}"></script>

Мой CSS, как описано на сайте DevBridge: https://www.devbridge.com/sourcery/components/jquery-autocomplete/

.ui.autocomplete-suggestions { border: 1px solid #999; background: #FFF; overflow: auto; }
.ui.autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; }

Мне не хватает ссылки на CSS или JS в моем html? Что я делаю не так?

Answer 1

Вы должны включить некоторые дополнительные стили

.autocomplete-suggestions {
    overflow: auto;
    border: 1px solid #CBD3DD;
    background: #FFF;
}

Обратитесь к разделу «Стиль» для получения дополнительной информации