9

I'm trying to change the background of the tab area.. like, You have a list of tabs, and I know how to change the color of each individual tab, but I was wondering if you could change the color of the background of all of that. Normally it's the dark gray color, and the tabs are the light gray. I was wanted to change those colors to maybe either a light blue, or light green, and I've tried changing the CSS of everything I could find relating to the UI Tabs, and none of them worked.

demitchell14
  • 195
  • 1
  • 1
  • 10
  • 2
    Did you try the theme roller? http://jqueryui.com/themeroller/ also a screenshot of what part exactly you are trying to change would help. – G-Man Mar 09 '13 at 17:20

2 Answers2

21

You want to change .ui-tabs .ui-tabs-nav.

CSS:

.ui-tabs .ui-tabs-nav
{
background: lightblue;
}

.ui-tabs .ui-tabs-panel /* just in case you want to change the panel */
{
background: blue;
}
Dom
  • 38,906
  • 12
  • 52
  • 81
  • 2
    jQuery UI uses more than just a color for backgrounds, I believe this will remove the semitransparent image overlay that gives the beveled effect. A better solution would be to use [themeroller](https://jqueryui.com/themeroller/) and either choose a different theme or create your own. – vgru Aug 17 '20 at 14:04
0

You can do this by setting the background of div also . below is example -->

<div id="tabs" style="background: none repeat scroll 0% 0% rgb(204, 204, 204);">
 <ul>
      <li><a href="#tabs-1">Product-Tweets</a></li>
      <li><a href="#tabs-2">Popular Product</a></li>
 </ul>
 <div id="tabs-1"> tab 1 content </div>
 <div id="tab-2"> tab 2 content </div>
</div>
Raj
  • 1,698
  • 4
  • 22
  • 39