5

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.

3
  • 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

9

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

1
  • 2
    @User86.3 You're a life saver. You're the king. You made my day.
    – Marco
    Commented Oct 6, 2022 at 13:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.