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

回答

相關問題