Можно ли отключить кнопку ввода = время очистки

Ответ 1

Ваше прямое решение для всех современных браузеров может быть:

input[type="time"]::-webkit-clear-button {
    display: none;
}

Если вы хотите указать его только для Internet Explorer 10, вы должны
::-ms-clear псевдоэлемент:

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

Вы также можете сделать это, используя width и height для всех элементов input:

input::-ms-clear {
    width: 0;
    height: 0;
}

Если вы хотите применить его только для ввода с типом текста:

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

EDIT 1:

Если это не работает, вы должны убедиться, что не выбрали режим браузера/документа, отличный от IE10/Standard, в инструментах F12!

ИЗМЕНИТЬ 2:

Кроме того, вы можете найти интересные псевдо-элементы управления:

/* Hide the cancel button */
::-webkit-search-cancel-button { 
    -webkit-appearance: none; 
}

/* Hide the magnifying glass */
::-webkit-search-results-button {
     -webkit-appearance: none; 
}

/* Remove the rounded corners */
input[type=search] { 
    -webkit-appearance: none; 
}

Ответ 2

Просто добавьте атрибут required:

<input type="date" required>

Я тестировал его в Chrome, и он отлично работает для меня.

Ответ 3

TL; DR не существует способа ввода времени и удаления только для HTML или CSS и удаления кнопки очистки, которая работает для всех основных браузеров. Чтобы решить эту проблему для всех браузеров, вы должны использовать библиотеку JavaScript и проверку сервера (если вы хотите, чтобы пользователь отправлял действительные данные).

CSS подход

Префиксные псевдоэлементы (::-webkit-*, ::-ms-*, ::-moz-*) являются специфичными для браузера и не являются стандартными, даже если многие специфичные для браузера элементы в конечном итоге были приняты в качестве стандартов, и хотя некоторые из этих нестандартных псевдоэлементов приняты большинством или всеми основными браузерами. В настоящее время я не знаю ни одного аналога Firefox для ответов webkit и ms.

Итак, не работает на Firefox

required Подход

<input type="time" required>

Выглядит хорошо, хорошо работает на Chrome и Firefox, но не работает на Safari. На самом деле Safari не имеет типа time или date.

Лучшее HTML-решение, так как оно не использует нестандартный CSS, но не работает в Safari

Решение JS

Если вы хотите, чтобы он работал во всех браузерах, используйте библиотеку JS, например js-datepicker. Он был протестирован для работы в разных браузерах и ограничивает пользовательский ввод без кнопки очистки.

Примечание по проверке сервера

Если вы вообще заботитесь о своих внутренних данных и о том, как они вообще хранятся (подсказка: вы должны это сделать), то проверьте их и в серверной части! Ограничение пользовательского ввода в интерфейсе не помешает ему запутаться решительным или запутанным пользователем. Проверка сервера помогает избежать странных ошибок или попыток внедрения XSRF.