CSS: Удалить кнопки поиска в WebKit
HTML5 дает массу полезностей. Так же и каждый браузер имеет свои «фичи» в своем движке. Вот например движок WebKit автоматически встраивает в поле поиска на Вашем сайте свои иконки. И иногда эти возможности ужасно мешают и не позволяют выполнить нужную верстку. Понадобилось удалить их — это можно сделать при помощи CSS.
input[type='search']::-webkit-search-decoration, input[type='search']::-webkit-search-cancel-button, input[type='search']::-webkit-search-results-button, input[type='search']::-webkit-search-results-decoration
Оформление input type=search
Safari по умолчанию не позволяет задавать оформление этому полю. Chrome позволяет, но частично.
Рассмотрим простой пример:
input[type=search]
Смотрим результат. Safari вообще не отреагирует на данные стили. Chrome проигнорирует правило border.
Решение
В webkit браузерах вид этого поля по умолчанию соответствует стандартному для этого движка: ему задано правило -webkit-appearance: searchfield. Чтобы добиться нужного оформления, достаточно отменить эту установку:
input[type=search]
Смотрим в живую. Поле изменит вид как нужно. При этом кнопочка-крестик для очистки поля останется (на момент подготовки материала, такая кнопка появляется при наборе текста только в Safari и Chrome).
Усложним задачу: требуется оформить нестандартно поле type=search с использованием фонового изображения. Под оформление должен попасть так же и крестик для очистки поля :).
input[type=search] < -webkit-appearance: none; width: 175px; /* указываем размеры полю */ height: 29px; border: none; background: url(img/send-job-form-inp.png); /* фоновая картинка для поля */ padding-left: 10px; /* внутренние отступы для красоты */ padding-right: 10px; box-sizing: border-box; /* чтобы размеры поля были во всех браузерах одинаковыми (по умолчанию вебкиты с крестиком для очистки иначе рассчитывают размер, чем остальные браузеры) */ -moz-box-sizing: border-box; /* для FF, который не весь CSS3 осилил */ >input[type="search"]:focus < outline: none; /* по хорошему тут нужно прописать альтернативный фон */ >input[type="search"]::-webkit-search-cancel-button < /* псевдо что-то, что отвечает за кнопку очистки */ -webkit-appearance: none; /* без сброса оформление не применится */ width: 17px; /* размеры кастомного крестика */ height: 16px; background: url(img/send-job-form-ulpoaded-close.png); /* новый вид крестика */ margin-right: 2px; /* его даже можно позиционировать */ cursor: pointer; /* вот это не работает */ >
- IE 8
- Firefox 3-4
- Opera 11.0
- Chrome
- Safari 5
Материалы
- CSS Webkit Appearance
- CSS приемы
- «Дергание» сайта
- background position со смещением
- clearfix
- CSS прозрачность
- CSS хаки
- RGBA — CSS полупрозрачность
- Затемнение фона
- Кроссбраузерный
- Обнуление отступов
- Порядок описания ссылок
- Прелоад изображений
- Сброс стилей
- Сокращения в CSS
- Убираем рамку с эл-ов в фокусе
- Условные CSS
- Условные комментарии
- Поворот вокруг своей оси
- Поворот объекта вокруг свой
- Resize для textarea в Safari и Chrome
- Блочная верстка форм
- Кастомные checkbox и radio на CSS
- Кросбраузерные input и textarea
- Кроссбраузерный button
- Нестандартные checkbox
- Нестандартные radio
- Нестандартные select
- Нестандартные select multiple
- Нестандартные поля выбора файла
- Нестандартные текстовые поля
- О кроссбраузерности placeholder
- Отступы у checkbox и radio
- Оформление input type=search
- Резиновая кнопка
- Текст в поле type=»password»
- Блоки равной высоты в строке
- Колонки равной высоты
- Прижимаем подвал к низу
- Ресайз окна: потомок перерос родителя
- Сайт в центре экрана
- Фиксированная колонка + резиновая + clear:both
- CSS 3D лента
- CSS3 всплывающие подсказки
- IMG внутри блока — убираем странный отступ
- IMG: меняем рисунок при наведении
- Аккордеон на чистом CSS3
- Валидный target=»_blank»
- Верстка рейтингов
- Верстка содержания
- Вставка спецсимволов в генерируемый контент
- Вставка стрелок
- Индивидуальные стили для li. Избавляемся от классов.
- Масштабируемая картинка в резиновой колонке
- Многоколоночный текст на CSS3
- Нестандартное подчеркивание
- Отменяем обтекание текстом картинки
- Оформление внешних ссылок
- Оформление изображений по align
- Оформляем «ol»
- Правильные анонсы новостей
- Список определений. Требуем невозможного.
- Firefox
- -moz-box-shadow и -moz-border-radius — это кошмар CPU
- Позиционирование внутри button
- Ширина input type=file
- Onload в IE9
- z-index в IE6-7
- Баг с текстом при применении Alpha фильтра
- Масштабирование и PIE
- Отступы в кнопках в IE6-7
- Проблемы с em
- Эмуляция after и before для IE 6-7
- Эмуляция data:URL для IE6-7 — используем MHTML-включение
- hasLayout
- Max-width
- Min-height
- Min-width
- Min-width и max-width одновременно
- PNG и прозрачность
- Высота блока 1px
- Дублирование символов
- Дырка под футером
- Как перекрыть select
- Обрезка контента c отрицательным margin в IE6
- Отступы плавающих блоков
- Проблемы с размерами блоков
- Псевдокласс :first-child
- Псевдокласс hover в IE 6
- Селектор потомков >
- Селекторы атрибутов [type=…]
- Сестринский селектор
- Смещение на 1px
- Ссылки с вложением
- Устраняем flickering
- Эмуляция position:fixed
- overflow-y
- Не подгружаются шрифты @font-face
- Проблема с oveflow: hidden
- Скругление img
- HTML шаблон для мобильных устройств
- Выпадающее меню на CSS
- Выравнивание навигации из блоков по центру
- Выравнивание навигации по середине
- Резиновое меню
- Резиновое меню из блоков
- Убираем класс для первого элемента
- Box-sizing: переключаем блочную модель
- inline-block: простое свойство для непростых задач
- Вертикальная позиция для строчного элемента
- Вертикальное выравнивание
- Выравнивание по центру с position: absolute
- Вычисляемые отступы
- Два в одном: позиция + размеры
- Долой отступы между строчными элементами (и блоками)
- Обходим схлопывание margin
- Центрирование картинки в блоке
- Центрирование резинового блока по горизонтали
- Активация flash
- Вставка flash в HTML
- Вставляем ролик с YouTube
- Как отключить flash
- Как перекрыть flash
- Параметры для вставки объектов
- Ссылка на flash объекте
- CSS треугольники
- Аппаратное ускорение анимации
- Встраиваем изображения — data:URL
- Градиент: CSS3 против CSS2 + картинка
- Лесенка спрайтов — сложный случай поклейки
- На одну картинку меньше. Спецсимвол ×
- Необычные тени с CSS3 box-shadow
- Оптимизация Google Web Fonts
- Оптимизация фонов с помощью Canvas
- Проблемы с border-radius
- Псевдоэлемент before для маркера списка
- Скругление углов. Обзор методов.
- Сокращаем HTML5 код
- Спрайты: меньше картинок — больше скорость
- Тень для блока
- Фигуры с углами на CSS
- Шаблоны градиентов
- Дополнение Skype
- Подключить favicon
- Профилактика сайта: максимально простое оповещение
- Ссылки на skype
- @font-face в деталях
- Cufon — нестандартный шрифт средствами JS
- font-size: 100.01% для html
- Безопасные шрифтовые CSS стеки для англоязычных текстов
- Безопасные шрифтовые CSS стеки для рунета
- Безопасные шрифты
- Вертикальный текст
- Используем псевдоэлемент :first-letter
- Контур для текста
- Нестандарный шрифт. Быть ему или нет?
- Нестандартный шрифт средствами CSS
- Плавающий :first-letter
- Подмена текста изображением
- Соответствия шрифтов Windows, Mac и Unix/Linux
- Строчный :first-letter
- Текст под углом
- Текст с CSS градиентом
- Тень для текста
- Эффект отражения
Убираем нативный крестик в поле ввода под IE
Во время ввода в текстовом поле IE появляется «крестик», который позволяет очистить поле в один клик. Иногда стиль, и вообще наличие этого крестика, не соответствуют вашему дизайну или логике работы поля. Разбираемся, как его убрать.
Режим совместимости в IE не позволяет определить когда был введен этот псевдоэлемент, но начиная с версии Internet Explorer 10 поддерживаются стили псевдоконтейнера ::-ms-clear.
В стили можно добавить, к примеру:
Как убрать крестик на input в IE 9 и IE 10? [дубликат]
По-умолчанию Internet Explorer 9 и 10 при фокусе на input ( type=»text» , type=»email» , type=»url» , type=»number» , type=»tel» , type=»search» ) появляется крестик очистки содержимого поля. Как убрать эту кнопку с input в IE 9 и IE 10?
Отслеживать
MobiDevices
задан 4 янв 2017 в 15:48
MobiDevices MobiDevices
7,299 5 5 золотых знаков 27 27 серебряных знаков 71 71 бронзовый знак
@SashaOmelchenko не вижу решения в вашем «дубликате» для input с type=»password»
5 янв 2017 в 10:23Перед тем, как задавать вопрос, мне кажется правильным поискать существующий вопрос. Учитывая, что ответили вы сами на свой же вопрос, то кусочек кода с ::-ms-reveal можно добавить как ответ на существующий вопрос. Ну и про type=password вы дописали уже после моего комментария 🙂
5 янв 2017 в 10:28
@SashaOmelchenko ответ на type=password был до вашего комментария) Будьте внимательней) Я просто исправил описание после вашего комментария. Тем более, мой ответ гораздо расширинней и предлагает несколько вариантов решения.