增加日期输入按钮可点击区域

Question

我有一个日期输入元素。

<input type="date" >

下面的红色方块是默认区域，点击按钮可以打开日期选择器：

我想知道是否可以增加这个区域以使其更容易点击，像这样更宽的东西：

html、javascript 或 css 中的解决方案都可以。

Answer 1

尝试使用::-webkit-calendar-picker-indicator伪元素

#date-inp::-webkit-calendar-picker-indicator {
  padding-left: 100px;
  border: 1px dashed red;
}

<input type="date" id="date-inp"/>