K48 K48 - 5 months ago 8
CSS Question

Input type=date spin control buttons on the right are not vertically aligned

I am using this code to create a date picker; the browser is Chrome 54.

<input type="date">


CSS:

input {
height: 35px;
line-height: 35px;
box-sizing: border-box;
vertical-align: middle;
}


In the result, the buttons on the right do not have proper vertical alignment, they align to the top.

input type=date buttons alignment problem

Is there a way to fix it so that they align to the middle?

Answer

You can manage with padding..

input {
        height: 35px;
        line-height: 35px;
        box-sizing: border-box;
        vertical-align: middle;
        padding:5px 0px;
}
<input type='date'>