Increase date input button clickable area

user_2966583 0
Viewed 2031

I have a date input element.

<input type="date" >

enter image description here

The following red square is the default area the button can be clicked to open the date picker: enter image description here

I wonder if it is possible to increase this area to make it easier to click, something wider like this: enter image description here

Solutions in html, javascript or css are ok.

date input css html javascript
1 Answers

Try using ::-webkit-calendar-picker-indicator pseudo-element

#date-inp::-webkit-calendar-picker-indicator {
  padding-left: 100px;
  border: 1px dashed red;
}
<input type="date" id="date-inp"/>

user_80532740
Related