Question

I’m working on an HTML page where we would like the input fields and select 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:

input.highlight:focus {
border: #003366;
border-style: solid;
border-width: 2px;    
}

The input field is defined within my HTML file like so:

<input class="highlight" name="attorneyName" id="attorneyName" type="text" value="John Jackson" size="50" maxlength="30">

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?

Answer 1

From another thread, someone was able to point out that the :focus attribute is only recognized in IE9. This explains why the jsFiddle version works properly. When running the HTML file from my local drive, however, IE9 runs in compatibility mode for IE8 and lower and the :focus attribute is never recognized.