Search code examples
cssgoogle-chromesafariios7

Date inputs cannot be aligned right on iOS7

tl;dr, Here the test, iOS7 can't right-align date inputs: http://cdpn.io/dxjHy

Consider this HTML:

<input type="date" id="test">

And this CSS:

#test {
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;

  text-align:right;
  padding:30px;
  width:400px;
  font-size:20px;
}

Safari on iOS7 doesn't want to right-align the text in the date input. My opinion is that Chrome's interpretation is the correct one. Any ideas on how to make Safari cooperate?

Chrome 30:

Chrome

Safari Mobile on iOS7, iPad:

iOS7

Solution

  • I've found a solution that works great. This seems to be the culprit, in Safari's stylesheet of input[type=date]

    display: -webkit-inline-flex;

    Add this to your CSS...

    input[type=date] {
    display:block;
    -webkit-appearance:button;
    -moz-appearance:button;
    appearance:button;
}

    ...and now your input will be able to understand text-align:right; correctly.