Search code examples
csshtmltypesdatepickermobile-safari

Vertical alignment is off on date type input

everyone

I am using an HTML5 date type input in a web form.

Here are the html blocks:

<div><!--birthdate-->
    <label for="birthdate" class="col1">Birthdate: </label> 
    <input type="date" class="col2" name="birthdate" id="birthdate" required>
</div><!--END birthdate-->

And the css rules for them:

.col1{text-align:right; width:111px; display:inline-block;}

.col2{width:162px; display:inline-block;}

Breakdown of browser behaviors:

Desktop Safari and Desktop Chrome are both working as expected.

iOS Safari from an iPad: the input field is slightly above its label.

Desktop Firefox displays it as a text-type input field.

I don't have enough rep to post an image, but can send individual answerers one on request.

Does anyone know a decent solution or workaround for this?

Solution

  • On Safari iOS 8.3 and Bootstrap 3, it worked for me with this:

    <input type="date" style="vertical-align:bottom;">