how to change tab pane color in html/css?

change background color of active tab css
how to change browser tab color in html
how to change color of tab in html
tabs in html using css example
simple css tabs
css change color of selected tab
pure css tabs
html tabs example with code

I want to change the default colour (blue) of tab-pane.

I want when a user clicks on any tab it will become "orange" and rest of the tab colour will remain "gray".

I am trying the below code:

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
 <a class="nav-link active" data-toggle="tab" href="#menu1" style="color:orange">Description</a>
</li>
<li class="nav-item">
 <a class="nav-link" data-toggle="tab" href="#menu2" style="color:gray">Product Reviews</a>
</li>
<li class="nav-item">
 <a class="nav-link" data-toggle="tab" href="#menu3" style="color:gray">Specifications</a>
</li>
<li class="nav-item">
 <a class="nav-link" data-toggle="tab" href="#menu4" style="color:gray">Warranty</a>
</li>

</ul>


<!-- Start Tab panes -->
<div class="tab-content">

<!-- Start Tab Pane Menu 1 -->
<div id="menu1" class="container tab-pane active" style="color:orange"><br>
 <p>Hello Description!</p>
</div>
<!-- End Tab Pane Menu 1 -->


<!-- Start Tab Pane Menu 2 -->

<div id="menu2" class="container tab-pane fade" style="color:orange"><br>
 <p>Hello Product Reviews!</p>
</div> <!-- End Second Container -->

<!-- End Tab Pane Menu 2 -->

<!-- Start Tab Pane Menu 3 -->

 <div id="menu3" class="container tab-pane fade" style="color:orange"><br>
   <p>Hello Store Info!</p>
 </div> <!-- End Second Container -->

<!-- End Tab Pane Menu 3 -->

 <!-- Start Tab Pane Menu 4 -->

 <div id="menu4" class="container tab-pane fade" style="color:orange"><br>
   <p>Hello Store Reviews!</p>
 </div> <!-- End Second Container -->

 <!-- End Tab Pane Menu 4 -->

I have clicked "product reviews" tab in image below. But the color remains "gray" instead of "orange"

After I clicked "product reviews" tab the color of the "description" tab has not changed to "gray" and it is still showing "orange"

what am I doing wrong?

You can refactor your changes like below. It would help you.

Html Changes;

<div id="header">
    <div id="menu_tabs">
        <ul class="current_page_itemm">
            <li class="current_page_item"><a href="#">Description</a>

            </li>
            <li><a href="#">Product Reviews</a>

            </li>
            <li><a href="#">Specifications</a>

            </li>
            <li><a href="#">Warranty</a>

            </li>

        </ul>
    </div>
</div>

JavaScript Changes;

$(document).ready(function () {
    $('#menu_tabs ul li a').click(function (val) {
        $('#menu_tabs ul li').removeClass('selected');
        $(val.currentTarget).parent('li').addClass('selected');
    });
});

CSS changes:

#menu_tabs ul li.selected {
    background: #FFA500;
    color: #FFA500;
}
#menu_tabs ul {
    margin: 0;
    padding: 25px 0 0 20px;
    list-style: none;
    line-height: normal;
}
#menu_tabs li {
    display: gray;
    float: left;
    background: gray;
}
#menu_tabs a {
    display: block;
    float: left;
    margin-right: 17px;
    padding: 5px 8px;
    text-decoration: none;
    font: 20px Georgia, "Times New Roman", Times, serif;
    color: #FFFFFF;
}
#menu_tabs a:hover {
    text-decoration: underline;
    background: #FFA500;
    color: #FFFFFF;
}
#menu_tabs a:active {
    background: #FFA500;
    color:black;
}

Below is the result for above code;

]1

How To Change Tabs on Hover, Learn how to change tabs on hover, with CSS and JavaScript. Vertical Tabs. Step 1) Add HTML: Change background color of buttons on hover */ .tab  If you want the tab panes coloured as well as the tabs then it can be done in CSS but you need to remove the styling from the tab contents container itself and style each tab pane itself (note

Hi Don't add inline styles

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
      <style>
         .nav-tabs>li.active>a, .nav-tabs>li.active>a:hover {
         color: orange;
         }
         .nav-tabs>li>a {
         color:gray;
         }
      </style>
   </head>
   <body>
      <body>
         <div class="container">
         <!-- Nav tabs -->
         <ul class="nav nav-tabs" role="tablist">
            <li class="nav-item">
               <a class="nav-link active" data-toggle="tab" href="#menu1">Description</a>
            </li>
            <li class="nav-item">
               <a class="nav-link" data-toggle="tab" href="#menu2">Product Reviews</a>
            </li>
            <li class="nav-item">
               <a class="nav-link" data-toggle="tab" href="#menu3">Specifications</a>
            </li>
            <li class="nav-item">
               <a class="nav-link" data-toggle="tab" href="#menu4">Warranty</a>
            </li>
         </ul>
         <!-- Start Tab panes -->
         <div class="tab-content">
            <!-- Start Tab Pane Menu 1 -->
            <div id="menu1" class="container tab-pane active">
               <br>
               <p>Hello Description!</p>
            </div>
            <!-- End Tab Pane Menu 1 -->
            <!-- Start Tab Pane Menu 2 -->
            <div id="menu2" class="container tab-pane fade">
               <br>
               <p>Hello Product Reviews!</p>
            </div>
            <!-- End Second Container -->
            <!-- End Tab Pane Menu 2 -->
            <!-- Start Tab Pane Menu 3 -->
            <div id="menu3" class="container tab-pane fade" >
               <br>
               <p>Hello Store Info!</p>
            </div>
            <!-- End Second Container -->
            <!-- End Tab Pane Menu 3 -->
            <!-- Start Tab Pane Menu 4 -->
            <div id="menu4" class="container tab-pane fade">
               <br>
               <p>Hello Store Reviews!</p>
            </div>
            <!-- End Second Container -->
         </div>
   </body>
   </body>
</html>

W3.CSS Tabs, Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java  To highlight the current tab/page the user is on, use JavaScript and add a color class to the active link. In the example below, we have added a "tablink" class to each link. That way, it is easy to get all links that is associated with tabs, and give the current tab link a "w3-red" class, to highlight it:

Remove your inline styles and just add this in style tag:

.nav-item > a.active{
  color: orange !important;
  }

Your new code would be like this:

.nav-item > a.active{
      color: orange !important;
      }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
      
    
    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
     <a class="nav-link active" data-toggle="tab" href="#menu1">Description</a>
    </li>
    <li class="nav-item">
     <a class="nav-link" data-toggle="tab" href="#menu2">Product Reviews</a>
    </li>
    <li class="nav-item">
     <a class="nav-link" data-toggle="tab" href="#menu3">Specifications</a>
    </li>
    <li class="nav-item">
     <a class="nav-link" data-toggle="tab" href="#menu4>Warranty</a>
    </li>
    
    </ul>
    
    
    <!-- Start Tab panes -->
    <div class="tab-content">
    
    <!-- Start Tab Pane Menu 1 -->
    <div id="menu1" class="container tab-pane active"><br>
     <p>Hello Description!</p>
    </div>
    <!-- End Tab Pane Menu 1 -->
    
    
    <!-- Start Tab Pane Menu 2 -->
    
    <div id="menu2" class="container tab-pane fade"><br>
     <p>Hello Product Reviews!</p>
    </div> <!-- End Second Container -->
    
    <!-- End Tab Pane Menu 2 -->
    
    <!-- Start Tab Pane Menu 3 -->
    
     <div id="menu3" class="container tab-pane fade"><br>
       <p>Hello Store Info!</p>
     </div> <!-- End Second Container -->
    
    <!-- End Tab Pane Menu 3 -->
    
     <!-- Start Tab Pane Menu 4 -->
    
     <div id="menu4" class="container tab-pane fade"><br>
       <p>Hello Store Reviews!</p>
     </div> <!-- End Second Container -->
    
     <!-- End Tab Pane Menu 4 -->
    
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

CSS Tab Colors - HTML & CSS, If you want the tab panes coloured as well as the tabs then it can be done in CSS but you need to remove the styling from the tab contents container itself and style each tab pane itself (note that generally when you say tab that refers to the little tab at the top and not the tab panel itself). In addition, if you have a blog, you may be able to change the background from within the blog's user interface without having to modify the CSS file for the theme directly. The Background-Color Property. You can change the background colour of any part of a web page by creating a background-color rule.

Bootstrap 3 change active tab color on Codeply, <div class="tab-pane active adopt-tab" id="1a">. <form class="inline-form adopt-​tab-form">. <div class="row">. <div class="col-sm-3">. <div class="form-group">. On a darker shade of box, the tab is represented with a ribbon-like structure atop it all. Each of the tabs also has text and a creative icon to represent each section. Now when clicked on the content inside uses slide up and slide down effect to get in and out of view. The tabs also change their color from gray to orange to display the selected item.

How to make each tab a different background colour?, When I try changing the color on the background portion .tabs li CSS: .tabs li a.​tab1 {background-color:#FF0000;} .tabs li a.tab2 {background-color:#FF0000;} . I have a concern about this. With multi-tabbed content like this, the user would likely be going back and forth from tab to tab. But now if they want to hit ‘Back’ to get to the previous page before the one with the tabbed content, it just sends them back to the last tab selected so probably not best for main content.

Topic: How to change tab-nav settings? (background color, font , How do I change the styling of Tab Nav elements? For example To change the background color of Tab Navigation, simply use the following CSS: .x-tab-​content .x-tab-pane { background-color: transparent; } .x-tab-content  Method 2: Using the tab-size property to set spacing for tab characters . The tab-size CSS property is set the number of spaces each tab character will display. Changing this value allows inserting the needed amount of space on one tab character. This method however only works with pre-formatted text (using <pre> tags).

Comments
  • Thank you for the answer. But unfortunately when clicked color does not change.
  • Thank you for the answer. But unfortunately when clicked color does not change.
  • Hi, it's working please recheck now.
  • Thanks for the reply again but unfortunately its not working. It just a hover orange color and it has gone after click and the selected tab text remain gray.