HTML5 date picker with small width doesn't show full date in Chrome

Viewed 471

When I have a standard Html5 date picker with a small width, I don't see the full date on Chrome even there is theoretically enough space to display it.

white space overlaying input

Is there any way on how to fix this behaviour of the HTML5 Datepicker?

#myDate {
  width: 110px;
}
<input type="date" id="myDate">

https://jsfiddle.net/weseba/ghp764n0/7/

1 Answers

yeah, you can set margin: 0 for calendar-picker:

input[type="date"]::-webkit-calendar-picker-indicator {
    margin: 0;
}
<input type="date" id="myDate" name="trip-start"
       min="2014-01-01" max="2021-12-31">

Related