为什么我的 jQuery 自动完成背景是透明的？

Question

我正在使用DevBridge's Autocomplete，效果很好，但我不明白为什么建议会显示在透明背景上。

我在前端的东西上非常糟糕，所以我不明白为什么像下面的文章那样编辑 CSS 文件对我不起作用：

• jquery autocomplete dropdown is transparent

我的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>

我在 DevBridge 网站上描述的 CSS： 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; }

我的 html 中是否缺少一些 CSS 或 JS 引用？我做错了什么？

Answer 1

你必须添加一些额外的样式

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

查看他们的样式部分了解更多信息