Tab Focus issue with elements on Mozilla Firefox:
<div class="editor-field">
<div>
<%: Html.TextBox(model => model.AddressLine1, new { maxLength = 30, style = "width:300px", tabindex = "0" })%>
</div>
<div class="editor-field">
<div>
<%: Html.TextBox(model => model.AddressLine2, new { maxLength = 30, style = "width:300px", tabindex = "0" })%>
</div>
<div class="editor-field">
<div>
<%: Html.TextBox(model => model.AddressLine3, new { maxLength = 30, style = "width:300px", tabindex = "0" })%>
</div>
My CSS for the focus style is as follows:
.editor-field > div > input:focus
{
outline: 1px dotted red !important;
}
I am not sure why the default tab navigation does not work in Mozilla Firefox but works fine in Chrome and IE. Can someone help me resolve this issue?