'input type="date" text-align:right IOS devices

/* css */
input{ text-align:right;}

// html
<input type="date" value="2015-05-06">

When a input with type="date", text-align:right is not work in Safari form IOS devices，But the other devices' broswer shows the normal. How to fix it ?

csshtmlsafari


Solution 1:[1]

iOS Safari applies styling to an element within the input. Here's what I saw when I inspected it with Safari + Simulator:

<input name="example" type="date">
  <div pseudo="-webkit-date-and-time-value">Jan 16, 2025</div>
</input>

And the internal element has the following styles applied by default:

input::-webkit-date-and-time-value {
  margin-top: 0px;
  text-align: center;
  width: 100%;
}

So you can override the alignment by using a selector that targets that particular element:

input::-webkit-date-and-time-value {
  text-align: right;
}

https://codepen.io/calvinwoo/pen/ExwMgEe

Solution 2:[2]

You need to add display: block to fix this.

input[type="date"] {
  display: block;
  text-align: right;
}

Solution 3:[3]

Try this.

input[type="date"] {
text-align:right;

}

Solution 4:[4]

Have you tried adding text-align: -webkit-right; like this:

/* CSS */
input {
  text-align: right;
  text-align: -webkit-right;
}

// html
<input type="date" value="2015-05-06">

Solution 5:[5]

Date input fields are not supported by all browsers yet: http://caniuse.com/#feat=input-datetime

Solution 6:[6]

Try this , because when you mention its type then it will take below property for date text box only

input[type="date"] {
text-align:right;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Rockallite
Solution 3 Uday Edke
Solution 4 Ofir Farchy
Solution 5 Jose Gómez
Solution 6 abhilash-ram

Related Questions