我如何风格jQuery-UI自动完成不同于jQuery-UI选项卡？ [英] How can I style jQuery-UI autocomplete differently than jQuery-UI tabs?

问题描述

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

I'm using two jquery ui widgets, autocomplete and tabs.

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

They each have their own stylesheets in jquery.ui.autocomplete.css and jquery.ui.tabs.css respectively, however they share a lot of styles in jquery.ui.theme.css. When I make a change to the styles in jquery.ui.theme.css it affects both the autocomplete and the tabs. How can I customize the styles different for autocomplete and tabs?

我想更改的一件事是自动完成的背景悬停效果的圆角。正确的.css更改为

One thing I would like to change is the rounded edges on the background hover effect for the autocomplete. The proper .css change to this is

.ui-corner-all， .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 。

However I would like the tabs to be rounded. So the change I would make is change the radius from 0px to 5px.

推荐答案

放置您要自定义的样式，例如在头部，如下所示：

Put style which you want to customize, for example at head section like below:

＃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

my-tab being your jquery-ui tab div id

编辑：

来自 jquery ui tabs documentation

您修改的html将如下所示：

Your rendred html will look like:

<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 } 

这篇关于我如何风格jQuery-UI自动完成不同于jQuery-UI选项卡？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！