Geek Answers Handbook

Date entries cannot be aligned right on iOS7

tl; dr, Here the iOS7 test cannot align the input date to the right: 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 does not want to align the text in the input field with time. My opinion is that the interpretation of Chrome is correct. Any ideas on how to get Safari to work together?

Chrome 30:

Chrome

Safari Mobile on iOS7, iPad:

iOS7

+4
source share
3 answers

I found a solution that works great. It seems to be a criminal in the Safari style sheetinput[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 entry will be able to correctly understand text-align:right;.

+7
source

, .

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

css

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

, .

+3

Using the Hoshibe css trick really helped, but should have added "left: 0;" to center the input window and no overflow.

div{
    position:relative;
    width: 99%; <!--Can be any width you need.-->
}
input[type="date"]{
    position:absolute;
    width:auto;
    right:0;
    left: 0;
}

Then, adding the code below to enter [type = "date"] will align the text to the right.

text-align: right;
display: block;

This fixed the issue on iOS 7 and 8.

0
source

More articles:


All Articles