Удалить кнопку IE10 «Очистить поле» на определенных входах?

743

Конечно, это полезная функция, но есть ли способ ее отключить?
Например, если форма представляет собой одно текстовое поле и рядом с ней уже есть кнопка «Очистить», то также избыточно иметь X. В этой ситуации было бы лучше удалить ее.

Можно ли это сделать, и если да, то как?

css internet-explorer-10

— Нит Тёмный Абсол
источник

1

Это также полезно для поля со значением по умолчанию, где пустое значение не имеет, например, количество.

— Джо Флинн

4

так как это не вызывает ввод ввода, это очень сложно, когда вы связываете событие javascript.

— Киви

1268

Стиль ::-ms-clearпсевдоэлемента для коробки:

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

— Ry-
источник

14

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

— Юсеф Салимпур

@Yousef: Да, именно так оно и работает, и отчасти поэтому вы никогда не должны использовать режим совместимости на реальном веб-сайте. Это на самом деле не совместимо :)

— Ry-

@minitech - IE9 на компьютере с Windows 7

— ManJan

3

Этот элемент управления появляется ТОЛЬКО в IE10 + на Win8. Хитрость заключается в том, что он все еще появляется, когда документ переведен в режим совместимости.

— EricLaw

48

@EricLaw: Ну, НЕ ТОЛЬКО на Win8. Я сейчас использую Windows 7 и вижу эти кнопки X в своем IE10. Таким образом, вы можете сказать, что это функция только для IE10 + (правда, не уверен насчет IE9), но определенно НЕ только для Win8, так как она появляется в версии IE10 для Win7. В любом случае, спасибо за совет, @minitech!

— OMA

272

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

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

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

— скудный
источник

3

Вот jsFiddle, иллюстрирующий этот обходной путь: jsfiddle.net/zoldello/S5YRj

— Фил

106

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

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

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

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

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

— Уоллес Сидре
источник

Спасибо, это сработало для меня.

— Сурадж Хосе

76

Вы должны стиль для ::-ms-clear( http://msdn.microsoft.com/en-us/library/windows/apps/hh465740.aspx ):

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

И вы также стиль ::-ms-revealпсевдоэлемента для поля пароля:

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

— ducdhm
источник

6

Обратите внимание - подумайте, можете ли вы заставить ::-ms-revealэлемент работать, прежде чем удалять его! (Или, если вы предоставляете эту кнопку для всех, как оригинальный аскер.) Некоторые действительно используют ее.

— Ry-

3

@minitech - это звучит великолепно. Можете ли вы рассказать нам, как заставить его работать с привязкой Javascript к событиям ввода? Это не вызывает событие, поэтому с ним почти невозможно работать.

— DarrellNorton

11

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

Если ваша страница должна работать в режиме совместимости, возможно, вы застряли с показом X.

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

— TomXP411
источник

0

Чтобы скрыть стрелки и крестик во временном вводе:

#inputId::-webkit-outer-spin-button,
#inputId::-webkit-inner-spin-button,
#inputId::-webkit-clear-button{
    -webkit-appearance: none;
    margin: 0;
}

— ClemPat
источник