Date inputs cannot be aligned right on iOS7

Question

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:

Safari Mobile on iOS7, iPad:

Answer 1

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.

Answer 2

We had the same problem in my office, we made a workaround.

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

and for the css

div{
    position:relative;
    width:100%
}
input[type="date"]{
    position:absolute;
    width:auto;
    right:0;
}

Hope, it can help you.