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

Я вытаскиваю свои волосы, пытаясь заставить 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?:\

Ответ 1

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

-webkit-appearance: none;

Вы также можете изменить размер -webkit-box-size, чтобы...

-webkit-box-sizing: content-box;

... так как кажется, что Webkit по умолчанию использует это значение границы (в основном, старая модель IE5).

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

Ответ 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;
}

Ответ 3

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

Ответ 4

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

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-search-inputs/