title: Jquery-UI Tab - Change Active Tab Color
body: <p>For the tab the user clicks on an is active, I like to change the tab color. I have the styling below. Is there another styling that I may be missing? </p>
  
  <p>I have the following code </p>
  
  <pre><code>// Styling of tabs 
  &lt;style&gt;
      .ui-tabs-active {
          background-color: green;     
      }
  &lt;/style&gt;
  
  
      // tab details
      &lt;div id="tabs"&gt;
       &lt;ul&gt;
        &lt;li&gt;&lt;a href="#tabs-1"&gt;Tab1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#tabs-2"&gt;Tab2&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#tabs-3"&gt;Tab3&lt;/a&gt;&lt;/li&gt;
       &lt;/ul&gt;
       &lt;div id="tabs-1"&gt;
        &lt;p&gt;Tab1 Content&lt;/p&gt;
       &lt;/div&gt;
       &lt;div id="tabs-2"&gt;
        &lt;p&gt;Tab2 Content&lt;/p&gt;
       &lt;/div&gt;
      &lt;div id="tabs-3"&gt;
        &lt;p&gt;Tab3 Content&lt;/p&gt;
      &lt;/div&gt;
     &lt;/div&gt;
  </code></pre>
  
  <p>// Javascript</p>
  
  <pre><code>  &lt;link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"&gt;
    &lt;link rel="stylesheet" href="/resources/demos/style.css"&gt;
    &lt;script src="https://code.jquery.com/jquery-1.12.4.js"&gt;&lt;/script&gt;
    &lt;script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"&gt;&lt;/script&gt;
  
   &lt;script type="text/javascript"&gt;
  
       $(function () {
         $("#tabs").tabs();
    });
   &lt;/script&gt;
  </code></pre>
  
  <p>It still shows in blue color whereas I have need it in green. </p>
  
  <p><a href="https://i.stack.imgur.com/oIjfZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oIjfZ.png" alt="enter image description here"></a></p>