Вход для поиска в HTML5: нет фонового изображения в Chrome?

Question

Я выдернул свои волосы, пытаясь заставить Chrome стилизовать мой search ввод с фоновым изображением.У Firefox нет проблем, но я боюсь, что это потому, что он обрабатывает ввод как обычный ввод текста.Это просто невозможно?

Попробуйте это в качестве демонстрации:

<input type="search" />

​input[type="search"] {
background: transparent 
    url(http://google.com/intl/en_ALL/images/srpr/logo1w.png) no-repeat 0 0;
}​​​​​​

Если все работает правильно, логотип Google (или его часть) должен быть в качестве фонового изображения для ввода "Поиск".Но, как вы увидите, когда вы посмотрите на это в Chrome, он не работает.Любые идеи, или это только одна из странностей HTML5?: \

Answer 1

Вы можете заставить Chrome (и Safari) лучше сочетаться со своими стилями в поле поиска HTML5 (включая фоновые изображения), если вы примените это в своем CSS:

-webkit-Appearance: none;

Вы также можете изменить -webkit-box-sizing на ...

-webkit-box-sizing: content-box;

..., поскольку он появляетсячто Webkit по умолчанию использует значение border-box (в основном это старая блочная модель IE5).

Имейте в виду, что до сих пор нет (очевидного) способа повлиять на положение / вид кнопки очистки поляи, поскольку только Webkit генерирует эту кнопку, вы можете столкнуться с некоторыми неприятностями в разных браузерах.

Answer 2

Полное решение для удаления всего лишнего дизайна, вызванного браузером. Это изменит поле поиска на обычное поле ввода

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;
}
input[type="search"]{
  -webkit-appearance: none;
  -webkit-box-sizing: content-box;
  outline:none;
}

Answer 3

Кнопка отмены может быть стилизована с помощью следующих

input[type="search"]::-webkit-search-cancel-button {

   /* Remove default */
    -webkit-appearance: none;

    /* Now your own custom styles */
    height: 10px;
    width: 10px;
    background: red;
    /* Will place small red box on the right of input (positioning carries over) */

}

Стили можно удалить с помощью

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;
}

http://css -tricks.com / 7261-webkit-html5-поиск-входы /

Answer 4

Как вы сказали, Mozilla обрабатывает вводимые данные как текст. Однако для браузеров Webkit (Chrome, Safari) входные данные поиска оформляются как созданная клиентом оболочка HTML для внутреннего Webcore Cocoa NSSearchField. Это то, что дает ему круглые края и кнопку «х», чтобы очистить себя, когда внутри него есть текст. К сожалению, кажется, что эти дополнительные функции не только недоступны в настоящее время CSS / JS, но также кажется, что нет спецификации W3 для того, какие свойства CSS могут применяться к этому элементу, а также к другим новым элементам HTML5. Пока не будет такой спецификации, я бы не ожидал, что она будет вести себя согласованно.