CSS input [date]: Как удалить гаджеты

Question

Мне нужно использовать чистый input[date] CSS.Для этого мне интересно, как удалить или отключить следующие элементы:

1. Как удалить синюю границу ?
2. Как предотвратитьредактировать день, месяц и год индивидуально?(и, следовательно, не имеет синего поля фона)
3. Как убрать крест ?
4. Как убрать двойную стрелку ?
5. Хотя я просто хочу сохранить гаджет с треугольником , чтобы выбрать дату в конце input[date], я хотел бы знать, как ее удалить.

=== РЕШЕНИЯ ===

Крест можно удалить с помощью аргумента required="required" в теге input.Но место, которое оно занимает, все еще здесь.

Answer 1

Вы можете использовать CSS, чтобы скрыть элементы, но чтобы предотвратить индивидуальное редактирование, вы должны написать несколько скриптов.И поставив onkeydown="return false", добьемся цели ?

/* To remove default blue outline */
input[type='date']:focus {
  outline: none;
}

/*  To remove cross sign */
input[type="date"]::-webkit-clear-button {
    display: none;
}

input[type="date"]::-ms-clear {
    display: none;
}

/* To remove Spin Arrows */
input[type="date"]::-webkit-inner-spin-button {
    display: none;
}

/* To remove Drop down Arrow */
input[type="date"]::-webkit-calendar-picker-indicator {
  display: none;  
}

<input type="date" onkeydown="return false"/>

Answer 2

Я нашел несколько решений для вашей проблемы.
Но я не нашел все.

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input::-webkit-clear-button {
    display: none;
}

.custom {
  outline: none;
}

<input type="date" class="custom" onkeydown="return false"/>

Я удалил синюю рамку , крест , двойная стрелка и запретил редактирование по отдельности .
Надеюсь, это поможет вам.