如何以不同於jQuery-UI選項卡的樣式來設置jQuery-UI自動填充的樣式？

Question

我正在使用兩個jQuery UI部件，自動完成和標籤。

它們各自在jquery.ui.autocomplete.css和jquery.ui.tabs.css中分別有自己的樣式表，但它們在jquery.ui.theme.css中共享很多樣式。當我對jquery.ui.theme.css中的樣式進行更改時，它會影響自動填充和製表符。如何自定義自動填充和製表符的不同樣式？

我想改變的一件事是自動完成的背景懸停效果的圓角。正確的CSS改變，這是

.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { -moz-border-radius-topleft: 0px; -webkit-border-top-left-radius: 0px; -khtml-border-top-left-radius: 0px; border-top-left-radius: 0px; }

但是我想的選項卡是圓的。所以我所做的改變是將半徑從0px更改爲5px。

要定製，例如在頭部分像下面

Answer 1

認沽風格：

#my-tab .ui-corner-all, #my-tab .ui-corner-top, #my-tab .ui-corner-left, #my-tab .ui-corner-tl { -moz-border-radius-topleft: 0px; -webkit-border-top-left-radius: 0px; -khtml-border-top-left-radius: 0px; border-top-left-radius: 0px; }

my-tab是你的jQuery UI的標籤DIV ID

編輯：

從jquery ui tabs documentation

您的百位html將如下所示：

<div class="ui-tabs ui-widget ui-widget-content ui-corner-all" id="tabs"> 
    <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all"> 
    <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabs-1">Nunc tincidunt</a></li> 
     <li class="ui-state-default ui-corner-top"><a href="#tabs-2">Proin dolor</a></li> 
    <div class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="tabs-1"> 
     <p>Tab one content goes here.</p> 
    </div> 
    ... 
</div> 

的「菜單」，你會被改寫：

#ui-tabs .ui-tabs-nav>li a { color: red !important }