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

При оформлении поиска на сайте очень интересным и стильным решением является создание единого поля, в котором вводится запрос и находится кнопка поиска. С технологической точки зрения это невозможно реализовать, но я всегда был сторонникам ловкости рук при отсутствии какого-либо мошенничества. Мы можем создать визуальный эффект, который будет имитировать нашу задачу. Для этого поместим кнопку и поле в один контейнер, затем убираем границы поля и присваиваем их родителю. В результате чего получаем единое поле, что и требовалось реализовать. Стоит отметить, что наш метод требует точного указания размеров всех трех элементов.

При проверке кроссбраузерности нашего метода я нашел один факт, который угрожает нашей иллюзии. Браузеры, работающие на движке webkit, при назначении фокуса полю подсвечивают ее границы. Чтобы отменить этот нежелательный эффект, необходимо прописать свойство outline, которому назначить значение none. Кроме этого с таким же значением прописать -webkit-appearance, таким образом мы убираем еле заметную рамку полей, которая появляется в таких браузерах.

Если вы хотите посмотреть, как это работает в реальных условиях — поднимитесь вверх и посмотрите как выглядит наш поиск, это будет ярким примером применения метода.

Для особо ленивых покажу на скрине

В каких браузерах работает?

5.0+	1.0+	4.0+	1.0+	1.0+	1.0+	1.0+