Закрыть ... [X]

Как сделать кнопки с иконками

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">, или, как в примере выше, в виде кнопки с фоновым рисунком.


Поделись с друзьями



Рекомендуем посмотреть ещё:



Icon Генератор: бесплатная программа для создания иконок Тросогаситель своими руками

Как сделать кнопки с иконками Как сделать кнопки с иконками Как сделать кнопки с иконками Как сделать кнопки с иконками Как сделать кнопки с иконками Как сделать кнопки с иконками Как сделать кнопки с иконками Как сделать кнопки с иконками Как сделать кнопки с иконками

ШОКИРУЮЩИЕ НОВОСТИ