I'm experiencing a small issue with a form that has two input fields for indicating time (in the format HH:mm) that are very close together, like this:
https://i.sstatic.net/u2GzN.jpg
Here is the HTML code snippet:
<label>
<span>Hour*</span>
<input type="text" class="input-sm" ng-model="ev.date_mn" name="ev_date_mn" placeholder="00" maxlength="2" required/>
<span class="divider">:</span>
<input type="text" class="input-sm" ng-model="ev.date_hr" name="ev_date_hr" placeholder="00" maxlength="2" required/>
</label>
And here is the corresponding CSS code:
.wrapper.crea-evento div.input-group div.input-section label > span {
width: 40%;
}
.wrapper.crea-evento div.input-group div.input-section label > span.divider {
width: auto;
margin: 0 5px;
float: right;
}
.wrapper.crea-evento div.input-group div.input-section input {
width: 50%;
float: right;
}
.wrapper.crea-evento div.input-group div.input-section input.input-sm {
width: 65px;
}
The issue arises only in Safari. When I click on the first input field (hours), it automatically focuses on the second one (minutes). The only way to enter data in the hours input field is by using the TAB key on the keyboard, which is not ideal.
In Chrome, Firefox, and IE (9+ and Edge as well), everything works fine. Only Safari exhibits this behavior. Could it potentially be a bug related to webkit? I've come across information about Safari's "autofocus" feature, but typically associated with mobile devices, not desktop browsers.