overflow: auto Allows Focus in Firefox
The Bug
Click in the first textbox and hit tab. In Firefox 1.5 and 2.0 the div element wrapping the label
and input elements gets focus [screenshot]! The outline that occurs when
an element gets focus can also affect the layout
[similar bug report].
![[screenshot]](FirefoxFocusBugScreenshot.png){kind=link}
<style type="text/css">
.control { overflow: auto; }
</style>
<div class="control">
<label for="txtName1">Name:</label>
<input type="text" name="txtName1" id="txtName1" />
</div>
<div class="control">
<label for="txtEmail1">Email Address:</label>
<input type="text" name="txtEmail1" id="txtEmail1" />
</div>
<div class="control">
<label for="txtPhone1">Home Phone:</label>
<input type="text" name="txtPhone1" id="txtPhone1" />
</div>
The Workaround
Option 1
Instead of using overflow: auto, use overflow: hidden. This works in this scenario, but can cause
layout problems in others. Use with caution.
<style type="text/css">
#fix1 .control { overflow: hidden; }
</style>
<div class="control">
<label for="txtName2">Name:</label>
<input type="text" name="txtName2" id="txtName2" />
</div>
<div class="control">
<label for="txtEmail2">Email Address:</label>
<input type="text" name="txtEmail2" id="txtEmail2" />
</div>
<div class="control">
<label for="txtPhone2">Home Phone:</label>
<input type="text" name="txtPhone2" id="txtPhone2" />
</div>
Option 2
Leave overflow: auto. Add tabindex="-1" to your div element and set outline: none
in your stylesheet. This works flawlessly in every browser I've tested it in, but won't validate since tabindex is not a
legal attribute for the dive element in (X)HTML.
<style type="text/css">
#fix2 .control { overflow: auto; outline: none; }
</style>
<div class="control" tabindex="-1">
<label for="txtName3">Name:</label>
<input type="text" name="txtName3" id="txtName3" />
</div>
<div class="control" tabindex="-1">
<label for="txtEmail3">Email Address:</label>
<input type="text" name="txtEmail3" id="txtEmail3" />
</div>
<div class="control" tabindex="-1">
<label for="txtPhone3">Home Phone:</label>
<input type="text" name="txtPhone3" id="txtPhone3" />
</div>