Как в input[type="date"] сделать открытие календаря не только с иконки?

Question

[LastGeneral]

Сейчас календарь открывается по нажатию только на иконку

А скрыть дату и иконку, и открывать сам выбор даты по нажатию на любую область input[type="date"]?

Comments

[Ragtime Kitty]

Без иконки: https://jsfiddle.net/kwymog96/1/
C иконкой: https://jsfiddle.net/kwymog96/

[Ярослав Иванов]

Ragtime Kitty, на скриншоте bootstrap. Иконка пропадает.
https://jsfiddle.net/dnv1ucm9/

[Ragtime Kitty]

Ярослав Иванов, так вроде и просили иконку убрать

[Дмитрий]

Хехе, буквально тем же сейчас занимаюсь. Хочу провернуть трюк с type file, но пока не получается.
Грубо говоря сделать обычный div, (например) круг. по клику на который открывается datepicker.

с файлом я делал абсолютное позиционирование и убирал его на -10000px. и стилизовал уже label. По клику на который и открывался выбор файла. с датой пока не получается

[Дмитрий]

Ragtime Kitty Вот такой фокус я с файлами делал. Повырезал лишнего на скорую руку. А так обычный кружок куда фоном фотка подгружается.
а с датой так не получается пока(

[Ragtime Kitty]

Дмитрий, Увы, label для даты не открывает календарь, а каких-либо других способов его тригерить я не вижу :(

Answer 1

[Antony Bark]

.parent{position: relative;z-index:1;opacity:0;} // это прозрачный input
.parent:after{position:absolute;z-index:0;height:100%;width:100%;content: "по желанию"; + можно иллюстрацию через bkg} // это то, что буде показано на месте input

отлично работает везде

Answer 2

[IrinaPronina]

Пример такой реализации

https://codepen.io/irinapronina/pen/QWQLaQO