title: IE8 + IE9 HTML and CSS Focus
body: <p>I'm working on an HTML page where we would like the <code>input</code> fields and <code>select</code> dropboxes to have a border around it as it is tabbed through and in focus. I've defined an input class within my CSS like so:</p>
  
  <pre><code>input.highlight:focus {
  border: #003366;
  border-style: solid;
  border-width: 2px;    
  }
  </code></pre>
  
  <p>The input field is defined within my HTML file like so:</p>
  
  <pre><code>&lt;input class="highlight" name="attorneyName" id="attorneyName" type="text" value="John Jackson" size="50" maxlength="30"&gt;
  </code></pre>
  
  <p>The focus seems to work fine in Chrome, but in IE the focus remains on one of my buttons no matter what I do. The button seems to steal the focus attribute and the page never focuses on any input fields, so the fields are never shown with a border around them while they are being tabbed through. What might be the cause of this problem?</p>