jquery - 我如何设置与 jQuery-UI 选项卡不同的 jQuery-UI 自动完成样式？

Question

我正在使用两个 jquery ui 小部件，自动完成和选项卡。

它们在 jquery.ui.autocomplete.css 中都有自己的样式表和 jquery.ui.tabs.css分别，但是它们在 jquery.ui.theme.css 中共享很多样式.当我更改 jquery.ui.theme.css 中的样式时它会影响自动完成和选项卡。如何为自动完成和标签自定义不同的样式？

我想更改的一件事是自动完成背景悬停效果的圆 Angular 边缘。对此的正确 .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

把你想自定义的样式，例如在head部分如下:

#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;边框左上角半径:0px； }

my-tab 是你的 jquery-ui tab div id

编辑:

来自 jquery ui tabs documentation

您的 rendred 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 }