How can I style jQuery-UI autocomplete differently than jQuery-UI tabs?

Question

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

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?

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

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

just put style='' into the tags, that will overwrite anything — Semur Nabiev
– Semur Nabiev, Commented Feb 26, 2012 at 12:44

asdf_enel_hak · Accepted Answer · 2012-02-17 07:30:34Z

1

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 being your jquery-ui tab div id

edit:

from jquery ui tabs documentation

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>

for "menu", you will override by:

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

edited Feb 17, 2012 at 7:30

answered Feb 16, 2012 at 20:20

asdf_enel_hak

7,6585 gold badges47 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user784637 Over a year ago

Thanks, do you have any tips for how to customize the autocomplete menu in the same way you suggested for tabs? The autocomplete menu does not have an id attribute and the menu is dynamically generated, so I'm having some difficulty there.

Collectives™ on Stack Overflow

How can I style jQuery-UI autocomplete differently than jQuery-UI tabs?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related