Главная » Языки программирования

Css input search убрать крестик

Содержание
  1. Оформление input type=search
  2. Решение
  3. Материалы
  4. Maxime Rouiller
  5. Unless someone like you cares a whole awful lot, nothing is going to get better.
  6. Remove the X from Internet Explorer and Chrome input type search
  7. About Maxime Rouiller
  8. Recents
  9. Оформление input type=search
  10. Решение
  11. Материалы
  12. Как убрать у input с типом search стили ( речь про крестик)?
  13. Войдите, чтобы написать ответ
  14. Div для секции с отзывами неправильно выравнивается с Bootstrap. Как решить эту проблему?
  15. Настройка шрифта HTML + CSS?
  16. Почему при публикации проекта на git pages в браузере отображается файл readme?
  17. Почему Джанго не подгружает картинку в CSS и браузер выдает ошибку 404?
  18. Можно ли округлить число в CSS или какой костыль можно придумать?
  19. Почему bottom:0 не работает?
  20. В css для header, а он не изменяется. Можете указать на ошибки?
  21. Возможно ли повторить эффект заливки градиентом на стилях?
  22. Как сделать обязательный скролл слайдера при прокрутке страницы?
  23. Как показать определенное количество символов у ссылки а остальные скрыть?
  24. Минуточку внимания
  25. How to remove “X” from search input field on Chrome and IE

Safari по умолчанию не позволяет задавать оформление этому полю. Chrome позволяет, но частично.

Рассмотрим простой пример:

Смотрим результат. Safari вообще не отреагирует на данные стили. Chrome проигнорирует правило border.

Решение

В webkit браузерах вид этого поля по умолчанию соответствует стандартному для этого движка: ему задано правило -webkit-appearance: searchfield. Чтобы добиться нужного оформления, достаточно отменить эту установку:

Смотрим в живую. Поле изменит вид как нужно. При этом кнопочка-крестик для очистки поля останется (на момент подготовки материала, такая кнопка появляется при наборе текста только в 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; /* вот это не работает */ >

Материалы

  • 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 градиентом
      • Тень для текста
      • Эффект отражения

      Источник

      Maxime Rouiller

      Unless someone like you cares a whole awful lot, nothing is going to get better.

      Remove the X from Internet Explorer and Chrome input type search

      When you have a some input with type=»search» , typing some content will display an X to allow you to clear the content of the box.

      That X is not part of Bootstrap or any other CSS framework. It’s built-in the browser. To be more precise, Chrome and IE10+.

      The only way to remove it is to apply something like this:

      /* clears the ‘X’ from Internet Explorer */
      input[type=search]::-ms-clear { display: none; width : 0; height: 0; }
      input[type=search]::-ms-reveal { display: none; width : 0; height: 0; }

      /* clears the ‘X’ from Chrome */
      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 { display: none; }

      The width/height on the Internet Explorer code is to ensure that no space is kept for the component. Otherwise, if you type text long enough, the content may be hidden under the hidden X .

      That’s it. Copy/paste that in our main CSS file and all search box won’t have that annoying X anymore.

      About Maxime Rouiller

      Maxime Rouiller

      I’m a Microsoft Cloud Developer Advocate, full time dad, part time coffee zombie. I care about developers and I’m actively working to help them achieve their goals.

      Recents

      Источник

      Оформление input type=search

      Safari по умолчанию не позволяет задавать оформление этому полю. Chrome позволяет, но частично.

      Рассмотрим простой пример:

      Смотрим результат. Safari вообще не отреагирует на данные стили. Chrome проигнорирует правило border.

      Решение

      В webkit браузерах вид этого поля по умолчанию соответствует стандартному для этого движка: ему задано правило -webkit-appearance: searchfield. Чтобы добиться нужного оформления, достаточно отменить эту установку:

      Смотрим в живую. Поле изменит вид как нужно. При этом кнопочка-крестик для очистки поля останется (на момент подготовки материала, такая кнопка появляется при наборе текста только в 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; /* вот это не работает */ >

      Материалы

      Источник

      Как убрать у input с типом search стили ( речь про крестик)?

      HunteR-VRX

      Не знаю как сейчас, но однажды работал этот псевдоэлемент:

      Войдите, чтобы написать ответ

      Div для секции с отзывами неправильно выравнивается с Bootstrap. Как решить эту проблему?

      Настройка шрифта HTML + CSS?

      Почему при публикации проекта на git pages в браузере отображается файл readme?

      Почему Джанго не подгружает картинку в CSS и браузер выдает ошибку 404?

      Можно ли округлить число в CSS или какой костыль можно придумать?

      Почему bottom:0 не работает?

      В css для header, а он не изменяется. Можете указать на ошибки?

      Возможно ли повторить эффект заливки градиентом на стилях?

      Как сделать обязательный скролл слайдера при прокрутке страницы?

      Как показать определенное количество символов у ссылки а остальные скрыть?

      Минуточку внимания

Оцените статью
© 2024 Программирование