用于自动完成小部件的CSS

Question

我想使用jqueryui.com中的自动完成小部件(下面的代码)，正如您所看到的，它们使用外部样式表来生成良好的样式。

如何更改“自动完成盒”的样式？身份证或班级是什么？当然，自动完成-建议没有格式化。

<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
var availableTags = ["test1", "test2", "test3"];
$( "#tags" ).autocomplete({
  source: availableTags
 });
} );
</script>
</head>
<body>
 <div class="ui-widget">
 <label for="tags">Tags: </label>
 <input id="tags">
 </div>
</body>
</html>

有关更多信息，请参见此处：http://jqueryui.com/autocomplete/#default

Answer 1

您可以通过在HTML中为输入框提供ID或类，或者如果希望使用选择器对所有自动完成框进行样式设置，可以对输入框进行样式设置。

.ui-autocomplete-input {
    /* Your CSS here */
}

“自动完成建议”显示为输入下面的列表。它的格式如下：

<ul class="ui-menu ui-autocomplete">
    <li class="ui-menu-item">Suggestion 1</li>
    <li class="ui-menu-item">Suggestion 2</li>
</ul>

作为以后的参考，我强烈建议您熟悉浏览器的检查器，例如铬DevTools或火狐的页面检查器。这可以帮助您自己解决HTML和CSS问题。

Answer 2

您可以访问小部件的不同组件集，如下所示。我为你做了一次现场直播。https://plnkr.co/edit/zMwsXhXtElU7VkvbJSvK?p=preview

若要访问标签：

.ui-widget label{
/* styles */
}

要访问插件的输入框，请执行以下操作：

.ui-widget input{
/* styles */
}

要访问插件列表，请执行以下操作：

.ui-menu .ui-menu-item{
/* styles */
}

Answer 3

“自动完成”框使用tags id，它有一个名为ui-autocomplete-input的类，因此如果要修改该元素，可以在CSS中包含类ui-autocomplete-input。