jquery ui自动完成，css问题

我想显示搜索结果的样式<ul>。但是，它的样式是从脚本生成的内联css。例如，如果我想将搜索框中的列表向下移动一下，我需要做些什么？jquery ui自动完成，css问题

2011-04-04 Johan

要制作属于您自己的JQueryUI自动填充主题，您需要重写样式。所有类的Here is an example：

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

所以，你的CSS文件应该覆盖所有你想改变的类样式。例如：

.ui-menu-item{ 
    color: blue; 
    font-weight: bold; 
}

不要忘记包含CSS文件AFTER JQueryUI CSS文件强制覆盖。

来源

2011-04-04 12:56:07

这不会解决问题 - jQueryUI将元素内联样式放在元素上，这些元素需要CSS类的主持。 – leek 2011-08-24 18:27:45

这并不能解决您的整个问题，但很方便。

jQuery UI自动完成模块有一个position属性，您可以使用these settings进行调整。

与CSS样式.ui-*类一起使用，你应该能够完成你想要的。

来源

2011-08-24 18:36:03 leek

如果我想将列表从搜索框中移出一点，我需要做些什么？

将以下内容添加到您的.css文件中。

.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; 
}

如果你想改变个别项目的风格，那么使用.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; 
}

来源

2013-03-19 14:29:41

搜索了几个小时之后，我想出了这样的事情：

var ac = $("#tags").autocomplete({ 
    source: availableTags, 
    open: function (event, ui) { 
     $(".ui-menu").css("width", 300); 
    } 
});

Open事件，您可以访问此元素不存在之前：\

来源

2013-06-18 22:19:04

jquery ui自动完成，css问题

回答

相关问题