как вы поместили увеличительное стекло и «поиск» в поле поиска в stackoverflow?

Question

Предполагая, что это возможно только с помощью CSS ... но хотелось бы знать, может ли кто-нибудь поделиться кодом.

Лупа - это фоновое изображение, но для устранения «поиска» в фокусе нужен javascript.

Кроме того ... как вы можете отправить его, нажав «возврат» вместо необходимости нажимать кнопку «поиск»?

Answer 1

Вовлечено несколько элементов.

Используйте Chrome DevTools (F12) для проверки этих вещей.

Answer 2

несколько вопросов там:

1. Отправить при возврате, если вы поместили ввод в форму и сфокусировались на указанном вводе, когда вы нажимаете Enter, браузер по умолчанию отправит форму.

2. Маскировка текста. Вы можете сделать это легко в jquery или любом другом фреймворке. по сути, вы удалите текст «поиск» в фокусе, но только этот текст, так что если бы было что-то вроде «foo», это не заменило бы его.

для вашей маскировки текста: текстовая маска

Answer 3

Для этого вы можете использовать новые типы input.

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

Атрибут «results» добавит значок лупы в браузеры WebKit.

Answer 4

Вид -> Источник страницы.

Серьезно, все это есть.