title: jquery problem with addClass() & toggleClass() & default CSS value
body: <p>As you can see in following code, background not changes, but border changes.
  The problem is with default background value.
  How to solve this problem?!</p>
  
  <p>jquery:</p>
  
  <pre><code>$(document).ready(function() {
      $('input').bind('focus blur', function() {
          $(this).toggleClass('focus');
      }); 
  });
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>input{background-color: blue;}
  focus{background-color: red; border: 1px solid blue}
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;input&gt;
  </code></pre>