Как получить ввод [type = date] с текстом в центре и без значка?

Question

<style>
 :host input[type=date] {
            position: relative;
            display: block;
            align-items: right;
            justify-content: right;
            height: 100%;
            width: 100%;
            background: white;
            border: 0px;
            z-index: -1;
            text-align: right;
            -webkit-appearance: none;
        }
</style>

мой выбор даты

также как мне переместить свой выбор даты назад? тень от верхних заголовков мешает моему ОКР.

ниже - моя html структура.

<div>
    #shadow-root
    <div>
        <input type="date">
    </div>
</div>

Answer 1

Замените <input type="date"> на <input type="text"> добавьте событие onfocus, чтобы получить значение даты в текстовом поле.

<input type="text" placeholder="DD/MM/YYYY" onfocus="(this.type='date')" style="text-align:center;"> 

Как вы получили таблицу из этого кода?

Answer 2

хорошо, у меня это сработало.

 :host input[type=date]::-webkit-calendar-picker-indicator {
                background: transparent;
                bottom: 0;
                color: transparent;
                cursor: pointer;
                height: auto;
                float: right;
                position: absolute;
                right: 0;
                top: 0;
                width: 40px;
            }

Это делает значок невидимым и устанавливает кнопку справа. Невидимый, но работает при нажатии

Answer 3

WebKit предоставляет доступ к некоторым селекторам, которые позволяют вносить дополнительные изменения в элементы.

input[type=date]::-webkit-calendar-picker-indicator {
    display: none;
}
input[type=date]::-webkit-datetime-edit {
  text-align: center;
}