Can I remove the entire style of jQuery UI tabs without breaking the styles of other UI components?

Question

I want to fully customize jQuery UI tabs without breaking the styles of jQuery UI date picker? Is that doable or should I do a custom work and not use jQuery UI tabs?

Answer 1

$("#mytabs").tabs()

<div class="ui-tabs ui-widget ui-widget-content ui-corner-all" id="mytabs">
   <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>

this example show most of the ui classes that may be applied.. you can reset them for children of e.g. #mytab only..

#mytab.ui-tabs {
    /* reset or overwrite everything you don't like */
}

#mytab li.ui-tabs-selected {
    /* reset or overwrite everything you don't like */
}

...

This is not exactly comfortable but allows you to still use say the jquery ui styles in any other element.

about the datepicker, as long you make sure the styles defined above are not used in the divs that hold the content you should be fine, most of the classes are prefixed with ".ui-datepicker-" or ".ui-tabs-" anyway so they should't interfere..