Удалить кнопку 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
источник