Как использовать -webkit-creation: searchfield-results-украшение?

Question

Счастливых праздников, все. Я, вероятно, буду чувствовать себя очень глупо, когда получу ответ на этот вопрос, но я хотел бы знать, как использовать правило CSS "-webkit-creation: searchfield-results-художественное оформление", чтобы нарисовать маленькое увеличительное стекло внутри поля поиска .

Я бы хотел создать окно поиска, подобное тому, которое находится в верхнем правом углу apple.com. Он должен иметь закругленные углы, значок увеличительного стекла и кнопку отмены / очистки, которая появляется, когда пользователь начинает печатать. Я могу пройти большую часть пути с

<input type="search" /> 

но здесь отсутствует значок увеличительного стекла. Я также знаю, что могу стилизовать элемент ввода с помощью «-webkit-creation: searchfield», но кажется, что это просто делает закругленные углы без правильного заполнения слева / справа, значка или кнопки отмены.

Меня интересует только эта работа в Webkit, так как он будет использоваться в Cocoa WebView. Мне не нужна разметка для IE, Firefox, Opera и т. Д.

Answer 1

Чтобы получить увеличительное стекло, нужно добавить resutls="0" к поиску. Если вы установите для результатов более высокое значение, например results="5", увеличительное стекло превратится в раскрывающееся меню, которое можно использовать для выбора ранее использованных поисковых терминов. Вы также можете добавить текст заполнителя, если вы не хотите иметь отдельную метку, а вместо этого использовать заполнитель, который исчезает при фокусировке элемента управления.

<input type="search" results="0" placeholder="Search">

Answer 2

Я не знаю насчет CSS для Webkit, но в обычном CSS фоновое изображение будет работать так:

style="background-image: url(glass.gif); 
       background-repeat: no-repeat; 
       background-position: left center;
       padding-left: 16px"

Кнопка "отмена", если для этого нет специальной команды Webkit, вам понадобится Javascript для. Вы можете использовать «position: относительный; left: -16px», чтобы поместить кнопку рядом с полем ввода и переместить ее влево, чтобы сделать плавающее над полем ввода.