如何設置與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選項卡文檔

您提交的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 }