I have a date input element.

<input type="date" >

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

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

Solutions in html, javascript or css are ok.

I have a date input element.

<input type="date" >

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

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

Solutions in html, javascript or css are ok.

• javascript
• html
• css
• date
• input

• An input is clickable on its entire width by default, you don't have to specifically click the icon to open the calendar. Or maybe this is browser-dependent, which browser forces you to click the icon? – Teemu Commented Dec 11, 2020 at 13:58
• I tried Chrome, Opera and Edge, I have to click in that area to open the date picker – stramin Commented Dec 11, 2020 at 14:04
• Ah ... It seems to work differently in FF. – Teemu Commented Dec 11, 2020 at 14:16

1 Answer 1

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"/>