2011-12-06 79 views
5

我正在使用jquerys autocomplete小部件,但我有幾個問題試圖設計當您搜索某物時下拉框。定製下拉式自動填充框

我試圖移動框有點並改變邊界/ bg顏色,但一些JS添加了一些嵌入式樣式,這是重寫我的.css樣式。但我找不到它。

基於I'v的排雷this one

<ul class="ui-autocomplete ui-menu ui-widget-content" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 11; display: block; width: 139px; top: 44px; left: 1101px; "><li class="ui-menu-item" role="menuitem"> 
+0

你遇到的一些問題代碼會有幫助。 – bookcasey

回答

7

爲了避免使用!important,您可以使用jQuery添加樣式,並以這種方式覆蓋它們。

$('ul.ui-autocomplete').css({ 
    color: 'red' 
}); 

另一種解決方案是從ul中刪除樣式屬性。

$('ul.ui-autocomplete').removeAttr('style'); 
4

沒有看到你的CSS樣式,或者您加載的.css文件的順序,您可以通過使用Firebug檢查了應用類,並添加!important;到主CSS樣式覆蓋樣式。

Ex。

ul.ui-autocomplete { 
color: red !important; 
} 

就可以解決這個問題的最好方法是適當地追查,如果你的jQuery插件有任何參數來幫助你,或者你自己剝離JS和添加自己的CSS樣式。

以上!重要;規則可能是一場噩夢,從某種意義上來說它是一種黑客攻擊 - 但它可能對你有用。

2

嘗試在你的CSS

重寫topleft增值margin-topmargin-left是不行的,因爲它是關於它從導出文本字段計算。

2

我真的不是在jQuery中的親,但我看看你發送的例子,菜單的樣式全部由菜單樣式表給出(jquery.ui.menu.css)。看看下面的鏈接,有一些信息可以幫助我,我想。

http://docs.jquery.com/UI/Menu#theming

您可以自定義這些類的下拉菜單的外觀和感覺。

«如果需要更深層次的自定義,那麼在jquery.ui.menu.css可修改的樣式表中引用了特定於窗口小部件的類。»從jquery網站。

2

退房文件jquery.ui.theme.css

.ui-widget-content頂部附近可以用來提上自動完成搜索結果框背景顏色,邊框和定位,也可以通過這個類扭捏。