Удалить кнопку "очистить поле" X в IE10 для определённых полей ввода?

Я обнаружил, что лучше устанавливать width и height в 0px. В противном случае IE10 игнорирует определенный отступ для поля — padding-right — который предназначен для того, чтобы текст не перекрывал иконку 'X', наложенную на поле ввода. Полагаю, что IE10 внутренне применяет padding-right инпута к псевдоэлементу ::--ms-clear, и скрытие этого псевдоэлемента не восстанавливает значение padding-right для самого инпута.

Это сработало у меня лучше:

.someinput::-ms-clear {
  width: 0;
  height: 0;
}

Я бы применил это правило ко всем полям ввода типа text, чтобы избежать дублирования в дальнейшем:

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

Можно даже сделать правило менее специфичным, используя только:

::-ms-clear { display: none; }

Я использовал последнее решение даже до написания этого ответа, но подумал, что большинству людей будет удобнее быть более специфичными. Оба решения работают нормально.

Вы должны оформить ::-ms-clear (согласно документации: http://msdn.microsoft.com/en-us/library/windows/apps/hh465740.aspx):

::-ms-clear {
   display: none;
}

Также не забудьте оформить псевдоэлемент ::-ms-reveal для поля пароля:

::-ms-reveal {
   display: none;
}

Эти стили обеспечат скрытие соответствующих элементов интерфейса в браузерах, использующих движок Microsoft.

Стоит отметить, что все решения, основанные на стилях и CSS, не работают, когда страница запускается в режиме совместимости. Рендерер в режиме совместимости игнорирует элемент ::-ms-clear, даже если в браузере отображается иконка «x».

Если ваша страница должна работать в режиме совместимости, возможно, вы не сможете избавиться от отображения «x».

В моем случае я работаю с некоторыми сторонними элементами управления, связанными с данными. Наша находка заключалась в том, чтобы обработать событие "onchange" и очищать хранилище данных, если поле очищается с помощью кнопки «x».

Чтобы скрыть стрелки и крестик в input типа "time", вы можете использовать следующий CSS:

#inputId::-webkit-outer-spin-button,
#inputId::-webkit-inner-spin-button,
#inputId::-webkit-clear-button {
    -webkit-appearance: none; /* Убирает стандартное оформление */
    margin: 0; /* Убирает отступы */
}

Эти стили применяются к элементу с идентификатором inputId. Они отключают стандартный внешний вид и поведение стрелок и кнопки очистки в браузерах на основе WebKit (например, Google Chrome и Safari). Убедитесь, что вы адаптируете селектор #inputId в соответствии с вашим конкретным идентификатором элемента ввода.