Как я могу остановить Safari, помещающий изображение увеличительного стекла в мое поле ?

#javascript #html #safari #css

#javascript #HTML #safari #css

Вопрос:

У меня есть текстовое поле (searchbox), закодированное следующим образом

 <input type="search" id="searchKeywords" name="searchKeywords" value="" maxlength="50">
  

То же самое не отображается нормально в Safari: у него есть фоновое изображение.

Но основная проблема, по моему мнению, из-за некоторого стиля по умолчанию:

 -webkit-appearance: searchfield;
  

Я нашел это с помощью инструментов разработчика Safari.

Как я могу переопределить то же самое?

Я уже пробовал использовать;

 -webkit-appearance:none;
  

а также использовать !important

Но, похоже, не переопределяется.

Пожалуйста, помогите мне. Спасибо.

Комментарии:

1. вы нашли способ взломать этот блок? найдите -webkit-свойства внешнего вида для safari в Google.

2. Я пытался найти это … Но пока безуспешно..

3. Вы пробовали добавить к нему background-image: none !important атрибут?

4. Зачем указывать type =»search», если вы не хотите, чтобы браузер выполнял форматирование по умолчанию для него?

5. Есть разница. ввод [тип =»поиск»] отправляет события «поиск» всякий раз, когда пользователь нажимает Enter. Кроме того, если элемент имеет атрибут «incremental», события «search» отправляются по мере изменения пользователем входных данных (с небольшой задержкой).) Событие «поиск» также отправляется, когда пользователь нажимает крестик справа от окна редактирования (для LTR), чтобы очистить ввод.

Ответ №1:

Вы должны проверить http://Formalize.me это отличный маленький пакет, который манипулирует объектами формы и стандартизирует их. При этом, похоже, что он использует:

 input[type=search] { -webkit-appearance: none; }
  

Ответ №2:

Если вы не хотите, чтобы браузер оформлял его как поле поиска, вам, вероятно, придется использовать type="text" вместо этого, как это делает этот сайт.

Комментарии:

1. Хотя type="text" они тоже оформлены по-разному, но да.