我想为显示搜索结果的<ul>
元素添加样式。但是,它会使用由脚本生成的内联css
进行样式设置。如果我想将列表从搜索框下移一点怎么办?
<input class="ui-autocomplete-input"/>
<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all">
<li class="ui-menu-item">
<a class="ui-corner-all">item 1</a>
</li>
<li class="ui-menu-item">
<a class="ui-corner-all">item 2</a>
</li>
<li class="ui-menu-item">
<a class="ui-corner-all">item 3</a>
</li>
</ul>
.ui-menu-item{
color: blue;
font-weight: bold;
}
经过数小时的搜索,我找到了以下类似的内容:
var ac = $("#tags").autocomplete({
source: availableTags,
open: function (event, ui) {
$(".ui-menu").css("width", 300);
}
});
“打开事件”可以让您访问以前不存在的元素:
.ui-autocomplete {
/* Move the autocomplete down a bit from the search box. */
margin-top: 35px !important;
/* Remove the whitespace around the individual items. */
padding: 0px;
}
如果您想更改单个项目的样式,则使用Fran的答案中提到的.ui-menu-item
。
如果您想更改列表中所选或悬停在其上的项目的样式,则需要将以下内容添加到您的.css
文件中。
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
background-color: grey;
background-image: none;
padding: 0px;
margin: 0px;
border-radius: 0;
}