CapitanFindus CapitanFindus - 4 months ago 9
CSS Question

Safari on MAC skipping input fields

I'm having a little problem on a form, which has two inputs fields, which indicates time ( format HH:mm ) that are really closer, something like this:

enter image description here

This is the HTML part

<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 this is the respective CSS part

.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 problem comes up, only on Safari, when i click on the first input of these ( hours ), it automatically focuses the second one ( minutes ). The only way to write on hours input field is by using
TAB
key on keyboard, which obviously isn't the best solution.

On Chrome, Firefox and IE ( 9+, Edge too ) works fine, only Safari has this behaviour. Could it be a
webkit
bug? I've read about this "autofocus" by Safari, but only on mobile, not on desktop

Answer

Your HTML is invalid; the label element can only contain, at most, one form element. Given that the HTML is invalid, each browser is attempting to somehow provide focus to one of the input elements, it just so happens that Chrome, Firefox & Internet Explorer/Edge end up providing focus to the same one, the first one. Safari is either providing focus to the last input or each input in succession.

The "solution" therefore is to rewrite your HTML so that each label is only associated with one input.