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

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

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


css internet-explorer-10
person Niet the Dark Absol    schedule 23.12.2012    source источник
comment
Это также полезно для поля со значением по умолчанию, где пустое значение не имеет смысла, например количество.   -  person Joe Flynn    schedule 21.06.2013
comment
поскольку это не запускает ввод ввода, это очень сложно, когда вы привязываете событие javascript.   -  person Kiwy    schedule 23.01.2014

Ответы (6)


arrow_upward
1301
arrow_downward

Создайте для поля ::-ms-clear псевдоэлемент стиля:

.someinput::-ms-clear {
    display: none;
}
person Ry-♦    schedule 23.12.2012
comment
Забавно, если вы используете режим совместимости IE для рендеринга своей страницы с движками до IE10, этот псевдоэлемент не работает, и он все равно показывает кнопку. - person Yousef Salimpour; 11.08.2013
comment
@Yousef: Да, именно так это работает и отчасти поэтому никогда не следует использовать режим совместимости на реальном веб-сайте. На самом деле это не совместимо :) - person Ry-♦; 11.08.2013
comment
@minitech - его IE9 на машине с Windows 7 - person ManJan; 15.08.2013
comment
@ManJan: Значит, ты уверен, что это не откуда-то еще? Я использую IE9 в Windows 7, и у него никогда не было кнопок × справа от текстовых полей, и, насколько мне известно, это не изменилось. - person Ry-♦; 15.08.2013
comment
Этот элемент управления появляется ТОЛЬКО в IE10 + на Win8. Хитрость в том, что он все еще появляется, когда документ переведен в режим совместимости. - person EricLaw; 06.09.2013
comment
@EricLaw: Ну, НЕ ТОЛЬКО на Win8. Я использую Windows 7 прямо сейчас и вижу эти кнопки X в моем IE10. Таким образом, вы можете сказать, что это функция только IE10 + (хотя не уверен в IE9), но определенно НЕ только Win8, поскольку она присутствует в версии IE10 для Win7. В любом случае, @minitech, спасибо за подсказку! - person OMA; 17.09.2013

arrow_upward
274
arrow_downward

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

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

.someinput::-ms-clear {
  width : 0;
  height: 0;
}
person jimp    schedule 06.02.2013
comment
Вот jsFiddle, иллюстрирующий этот обходной путь: jsfiddle.net/zoldello/S5YRj - person Phil; 05.03.2014
comment
добавить display: none - person snir; 15.12.2020

arrow_upward
114
arrow_downward

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

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

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

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

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

person Wallace Sidhrée    schedule 16.08.2013

arrow_upward
76
arrow_downward

Вам следует использовать стиль для ::-ms-clear (http://msdn.microsoft.com/en-us/library/windows/apps/hh465740.aspx):

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

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

::-ms-reveal {
   display: none;
}
person ducdhm    schedule 19.02.2014
comment
Примечание - подумайте, можно ли заставить работать элемент ::-ms-reveal, прежде чем его удалять! (Или, если вы предоставляете эту кнопку всем, как первоначальный вопросник.) Некоторые действительно ее используют. - person Ry-♦; 26.02.2014
comment
@minitech - звучит здорово. Не могли бы вы рассказать нам, как заставить его работать с привязкой Javascript к событиям ввода? Он не вызывает события, поэтому работать с ним практически невозможно. - person DarrellNorton; 03.04.2015

arrow_upward
11
arrow_downward

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

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

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

person TomXP411    schedule 02.08.2016

arrow_upward
0
arrow_downward

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

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