Как сделать кнопку внутри поля для поиска?

Влад Мержевич

Тема: Формы
Internet Explorer Chrome Opera Safari Firefox Android iOS
5.0+ 1.0+ 4.0+ 1.0+ 1.0+ 1.0+ 1.0+

Задача

Разместить кнопку отправки формы внутри рамки для ввода текста.

Решение

Надо понимать, что напрямую добавить кнопку внутрь поля формы нельзя. Поэтому любые методы лишь имитируют этот эффект. Для создания подобной иллюзии следует убрать исходную рамку вокруг поля для поиска и добавить её к элементу, внутри которого располагается поле и кнопка. Данный метод лучше всего работает когда все размеры у нас имеют фиксированные значения. В примере 1 общая ширина формы задана как 300 пикселов, поле имеет ширину 274 пиксела, а кнопка — 20 пикселов. Ширина поля подобрана с учётом того, чтобы не возникало переносов в форме, это негативно скажется на общем виде.

Некоторых добавлений в код CSS потребуют браузеры Safari и Chrome. При получении фокуса поля формы подсвечиваются цветной рамкой, которая разрушает нашу иллюзию единого поля. Чтобы этого не возникало, в стиле поля для поиска добавим outline со значением none, это позволит заблокировать появление рамки в указанных браузерах. Вокруг поля поиска (<input type="search">) в любом случае останется тонкая рамка, её можно удалить с помощью специфического свойства -webkit-appearance опять же со значением none.

Пример 1. Форма поиска

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Форма для поиска</title>
  <style>
   .search {
    width: 300px; /* Ширина поля с кнопкой */
    border: 1px solid #000; /* Параметры рамки */
    min-height: 20px; /* Минимальная высота */
   }
   input[type="search"] {
    border: none; /* Убираем рамку */
    outline: none; /* Убираем свечение в Chrome и Safari */
    -webkit-appearance: none; /* Убираем рамку в Chrome и Safari */
    width: 274px; /* Ширина поля */
    vertical-align: middle; /* Выравнивание по середине */
   }
   input[type="submit"] {
    width: 20px; /* Ширина кнопки */
    height: 20px; /* Высота кнопки */
    border: none; /* Убираем рамку */
    background: url(images/video.png) no-repeat 50% 50%; /* Параметры фона */
   }
  </style>
 </head>
 <body>
  <form>
    <div class="search">
     <input type="search" name="q">
     <input type="submit" value="">
   </div>
  </form>
 </body>
</html>

Результат примера показан на рис. 1.

Вид поля для поиска с кнопкой

Рис. 1. Вид поля для поиска с кнопкой

Саму кнопку можно добавить по разному. Например, сделать её обычной кнопкой с надписью, через <input type="image">, или, как в примере выше, в виде кнопки с фоновым рисунком.

CSS по теме

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.