title: web kit scrollbar not chaging until i hover over it when changing themes
body: <p>In my webpage I am trying to get a custom scroll bar. It is working fine. </p>
  
  <p>Now I have a theme button which allows user to choose either a black theme or a white theme. For this I wrote two css files, one carbon.css and another quartz.css  </p>
  
  <p>When a user clicks on one of the themes, I am updating the css file with the below function.             </p>
  
  <p>I am able to see all changes correctly except the scroll bar. Until I hover my mouse over the scroll bar, that css change is not happening. </p>
  
  <p>To be more clear, suppose i am in black theme. I am seeing black scroll bar. Now when I click the white theme, I am seeing all my background, text changing properly to white theme. But the scroll bar still remains in black theme. Once I move my mouse on to scroll bar it is updating the scroll bar to white theme. </p>
  
  <p>How can I solve this problem?</p>
  
  <p>Thanks!</p>
  
  <p>Hey Anubav: here is the code I am working after including your changes:</p>
  
  <p><strong>trail.html</strong></p>
  
  <pre><code>  &lt;html&gt;
    &lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
    &lt;script   type="text/javascript" src="./jquery-1.7.1.min.js"&gt;&lt;/script&gt;
    &lt;link href="./carbon.css" rel="stylesheet" type="text/css" id="extCSSFile"/&gt;
    &lt;script type="text/javascript"&gt;
    $(document).ready(function() {
    function changeAndPaint(that){
  
          var filename = $(that).attr('data-href');
  
      $('#extCSSFile').attr('href',filename);
          var newfile = $('#extCSSFile');
  
          $('#extCSSFile').remove();
          $(that).css('display','none').height(); //&lt;--this is the trick to repaint
          $(that).css('display','inherit');       
  
  
          var elem = $('&lt;link href="" rel="stylesheet" type="text/css" id="extCSSFile"/&gt;');
          $(elem).attr('href',filename);  
          $('head').append(elem);
  
      }
  
          $('#carbonTheme,#quartzTheme').on('click', function(){
                  changeAndPaint($(this));
              }); 
              });
              &lt;/script&gt;
     &lt;/head&gt;
    &lt;body&gt;
   &lt;ul id="nav"&gt;
      &lt;li id="carbonTheme" data-href="./carbon.css"&gt;carbon Theme &lt;/li&gt;
      &lt;li id="quartzTheme" data-href="./quartz.css"&gt;Quartz Theme &lt;/li&gt;
   &lt;/ul&gt;      
    &lt;div&gt; 
             &lt;p&gt;There are no results&lt;/p&gt;
              &lt;p&gt;There are no results&lt;/p&gt;
              &lt;p&gt;There are no results&lt;/p&gt;
              &lt;p&gt;There are no results&lt;/p&gt;&lt;p&gt;There are no results&lt;/p&gt;
              &lt;p&gt;There are no results&lt;/p&gt;
              &lt;p&gt;There are no results&lt;/p&gt;
              &lt;p&gt;There are no results&lt;/p&gt;&lt;p&gt;There are no results&lt;/p&gt;
              &lt;p&gt;There are no results&lt;/p&gt;
  
              &lt;p&gt;There are no results&lt;/p&gt;
              &lt;p&gt;There are no results&lt;/p&gt;
              &lt;p&gt;There are no results&lt;/p&gt;
             &lt;p&gt;&lt;/p&gt;
             &lt;p&gt;&lt;/p&gt;&lt;p&gt;&lt;/p&gt;&lt;p&gt;&lt;/p&gt;&lt;p&gt;&lt;/p&gt;&lt;p&gt;&lt;/p&gt;
             &lt;p&gt;&lt;/p&gt;&lt;p&gt;&lt;/p&gt;&lt;p&gt;&lt;/p&gt;&lt;p&gt;&lt;/p&gt;&lt;p&gt;&lt;/p&gt;
             &lt;p&gt;&lt;/p&gt;&lt;p&gt;&lt;/p&gt;&lt;p&gt;&lt;/p&gt;&lt;p&gt;&lt;/p&gt;&lt;p&gt;&lt;/p&gt;
             &lt;p&gt;&lt;/p&gt;&lt;p&gt;&lt;/p&gt;&lt;p&gt;&lt;/p&gt;&lt;p&gt;&lt;/p&gt;&lt;p&gt;&lt;/p&gt;
             &lt;p&gt;&lt;/p&gt;
  
  
              &lt;/div&gt;
              &lt;/body&gt;
              &lt;/html&gt;
  </code></pre>
  
  <p><strong>carbon.css</strong></p>
  
  <pre><code>body {
      font-family: Arial, Helvetica, sans-serif;      
      font-size:8.5pt;  
      width:inherit;
      min-width:100px;
      max-width:250px;
      margin:10px;
      background-color:#191919;
      color:white;    
  }
  
   ul{height:1000px;}
  
   #carbonTheme, #quartzTheme{ 
   text-decoration:underline;
   color:blue;
    }
    ::-webkit-scrollbar {
      width: 12px;
   }
  
  ::-webkit-scrollbar-track {
   background-color:#aaa;
  }
  
  ::-webkit-scrollbar-thumb {
  
    background-color:black;
  }
  </code></pre>
  
  <p><strong>quartz.css</strong></p>
  
  <pre><code>body {
      font-family: Arial, Helvetica, sans-serif;      
      font-size:8.5pt;  
      width:inherit;
      min-width:100px;
      max-width:250px;
      margin:10px;
  
   }
    ul{height:1000px;}
  
    #carbonTheme, #quartzTheme{ 
    text-decoration:underline;
    color:blue;
   }
   ::-webkit-scrollbar {
   width: 12px;
   }
  
   ::-webkit-scrollbar-track {
    background-color:#333;
   }
  
    ::-webkit-scrollbar-thumb {
  
     background-color:white;
   }
  </code></pre>