Как сделать красивый input css

Добавил пользователь Alex
Обновлено: 30.08.2024

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

Сам пример в действии:

Теперь рассмотрим CSS-стили:

Если проанализировать код CSS, то видно, что элемент input мы прячем (свойство display: none), а все остальные стили прописаны для элемента label , а также псевдоэлементов label::before и label::after. Изменения внешнего вида также осуществляются для псевдокласса :checked, который имеет смысл использовать для флажков и радио-кнопок.

Еще ряд похожих вариантов с анимацией вам предлагает Himalaya Singh в своем примере.

И еще один пример:

See the Pen Simple CSS Checkbox by Tristan White (@triss90) on CodePen.18892

Примеры стилизации флажков с ресурса codepen.io

Как работает стилизация

В этом примере видно, где расположен флажок, который обычно скрывается с помощью свойства display: none, и как стилизованы label . Откройте вкладку CSS и проанализируйте код.

Простое решение для флажков и переключателей от Jon Kantner.

Близкие к стандартным варианты флажков, переключателей и выпадающих списков от Kenan Yusuf

Зачеркивание при выборе флажка с анимацией

Несколько интересных решений для флажков и переключателей от Brad Bodine

See the Pen CSS3 Checkbox Styles by Brad Bodine (@bbodine1) on CodePen.18892

Несколько похожих переключений состояний чекбокса от Olivia Ng

Разные виды переключателей от Mauricio Allende

Анимированное переключение состояний флажка в виде пилюли

Круглая кнопка с анимацией от mandycodestoo

See the Pen 100dayscss-66 by @mandycodestoo (@mandycodestoo) on CodePen.18892

Анимация текста флажков и радио-кнопок от Ra?l Barrera

Подсветка текста label + анимация выбора чекбокса от Adam Quinlan

See the Pen chippy checkbox inputs by Adam Quinlan (@quinlo) on CodePen.18892

Анимированные флажки с изменением цвета на основе css-переменных от Stas Melnikov

Анимация флажков с переворотом

Анимация флажков и переключателей в стиле Material Design от Matt Sisto

Перекатывающийся шарик от Jon Kantner

Вариант 1

See the Pen Toy Toggle Switch by Jon Kantner (@jkantner) on CodePen.18892

Вариант 2 со скрепкой

Карандаш для отметки выбора флажка

Еще один вариант анимации от Jon Kantner, но с появлением карандаша. Отличное решение для тестов, например.

Меняем цветовую схему переключателем

Автор Jon Kantner предлагает вашему вниманию вариант кода, при котором клик на чекбоксе меняет цвет фона.

Вариант 1

Вариант 2

Переключатель энергии

See the Pen Blocky Toggle Switch by Jon Kantner (@jkantner) on CodePen.18892

Реализация аккордеона на чистом CSS с использованием чекбоксов от Alex Bergin

Переключатель цены от Aniruddha Banerjee

See the Pen Pricing Card Design by Aniruddha Banerjee (@imanirudh1) on CodePen.0

Выбор группы иконок от H?vard Brynjulfsen

Сложные примеры

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

Шестеренки в переключателе с анимацией

Флажок-выключатель

Отличная стилизация в виде выключателя с внутренней подсветкой от Yoav Kadosh.

Лампа-переключатель

Вариант попроще внешне от Jon Kantner, но в коде вы найдете очень меого правил.

Флажок-переключатель

Настоящий переключатель от Jon Kantner. Здесь использован не только CSS, но и JS-код.

Еще один вариант 3D-переключателя

3D-трансформации с анимацией

Глядя на этот пример, понимаешь, что стилизация переключателей - это наименьшее из того, что сделал автор Ivan Grozdic . Отличный вариант для туристического сайта в плане выбора услуг.

Пример генератора пароля с использованием флажков

ToDo List (список дел) от Will Boyd

Интересно то, что при отметке чекбокса вы получаете список дел с подсчетом сделанных и несделанных заданий на основе только лишь CSS, совсем без JavaScript-кода, за счет использования свойства counter-increment и свойства order Flexbox-модели.

Бонус. Невключаемый чекбох

Для тех, кто дочитал до конца - бонус - чекбокс, который нельзя оставить включенным, так как вы рассердите мишку. Он даже рычать умеет и хмурить брови. Наслаждайтесь ))) Написано на React. Автор Jhey.

Формы являются неотъемлемой частью Интернета, так как они предлагают сайтам метод сбора информации от пользователей и обработки запросов, а также элементы управления практически для любого мыслимого применения. С помощью элементов управления или полей, формы могут запросить небольшой объём информации — часто это поисковый запрос, имя пользователя или пароль. Или большой объём информации — возможно, данные о посылке, платёжная информация или предложение работы.

Мы должны знать как создавать формы чтобы получить входные данные от пользователя. В этом уроке мы обсудим, как использовать HTML для разметки формы, какие элементы использовать для захвата разных типов данных и как стилизовать формы с помощью CSS. Мы не станем слишком углубляться в то, как информация из формы обрабатывается на стороне сервера. Обработка форм представляет собой глубокую тему, вне области этой книги; здесь мы будем придерживаться создания и стилизации форм.

Инициализация формы

Чтобы добавить форму на страницу мы будем использовать элемент

Демонстрация формы для входа

На практике

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

Перепрыгнем к нашему файлу register.html и начнём, следуя тому же макету что мы использовали для страниц Спикеры и Место проведения. Он включает в себя добавление элемента с классом row чуть ниже вступления и вложенный элемент

В качестве напоминания — класс row добавляет белый фон и обеспечивает некоторый вертикальный padding , в то время как класс grid выравнивает по центру наш контент в середине страницы и обеспечивает некоторый горизонтальный padding .

с классом grid мы собираемся создать две колонки, одна 2/3, а другая 1/3 от ширины страницы. Колонка 2/3 будет элементом с левой стороны, которая говорит пользователям, почему они должны зарегистрироваться на нашей конференции. Колонка 1/3 будет элементом

Теперь внутри нашей колонке 2/3 добавим некоторые детали о нашем мероприятии и почему поучаствовать в нём будет хорошей идеей для начинающих дизайнеров и фронтенд-разработчиков. Мы сделаем это, используя несколько разных уровней заголовков (вместе с заранее установленными для них стилями), абзацем и маркированным списком.

В нашем элементе с классом col-2-3 код должен выглядеть следующим образом:

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

Чтобы сделать это, добавим класс why-attend к маркированному списку.

Новый раздел в нижней части нашего файла main.css должен выглядеть следующим образом:

Далее, внутри элемента

Для поля комментариев используется элемент

без каких-либо специальных модификаций. И, наконец, за пределами элемента содержится поле для отправки формы, которое формируется с помощью элемента со значением submit у атрибута type .

Форма на месте, пора добавить к ней стили. Мы начнём с нескольких стилей по умолчанию для самого элемента и для элементов , и

Мы начали с размещения 22-пиксельного margin снизу формы, чтобы вертикальное пространство помогло отделить его от других элементов. Затем добавили некоторые шрифтовые свойства, в том числе насыщенность, размер, высота строки и семейство для всех элементов , и

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

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

После того, как класс register-group находится на месте, мы добавим несколько стилей для элементов, вложенных в . Эти стили появятся в нашем файле main.css, ниже существующих стилей формы.

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

Пока всё идёт хорошо и наша форма становится довольно красивой. Единственный оставшийся элемент, который ещё не стилизован — это кнопка для отправки. Для кнопок у нас уже есть некоторые существующие стили и мы можем применить их здесь. Если мы мысленно перенесёмся к нашей главной странице, наш раздел hero содержит кнопку, которая получает несколько стилей через класс btn .

Добавим значение btn к атрибуту class , наряду с новым классом btn-default к нашей кнопке для отправки. Мы будем использовать имя класса btn-default специально, так как эта кнопка выводится на белом фоне и стиль для кнопок по умолчанию передвинется вперёд.

Теперь наша кнопка для отправки делит некоторые общие стили с кнопкой на главной странице. Мы воспользуемся классом btn-default чтобы применить некоторые новые стили конкретно к нашей кнопке.

Возвращаясь назад к разделу с кнопками в нашем файле main.css, добавим следующее:

Эти новые стили определяют размер и фон нашей кнопки, затем комбинируются с существующими стилями класса btn и создают финальную презентацию нашей кнопки.

Рис. 10.07. Наша страница регистрации с формой

Демонстрация и исходный код

Ниже вы можете скачать исходный код сайта на данный момент.

Резюме

Формы играют большую роль в том, как пользователи взаимодействуют с сайтами, предоставляют им информацию и работают с ними. Мы предприняли все правильные шаги, чтобы не только узнать как создавать формы, но и как их стилизовать.

Напомним быстро, что мы обсудили в этом уроке:

как инициализировать форму;
способы получения текстовой информации от пользователей;
разные элементы и методы для создания нескольких вариантов выбора и меню;
какие элементы и атрибуты лучше всего использовать для отправки данных формы на обработку;
как лучше организовать формы, задать структуру и значение полям формы;
набор атрибутов, которые помогают собрать больше подходящих данных.

Наше понимание HTML и CSS продвигается достаточно хорошо и у нас остался только один компонент для изучения: таблицы. В следующей главе мы рассмотрим как организовать и представить данные в таблицах.

Изображения и фоновые рисунки позволяют легко изменить вид текстовых полей и кнопок для отправки формы на сервер. Как обычно, вначале требуется нарисовать желаемые элементы в графическом редакторе (рис. 1), а затем сделать отдельные изображения для каждого поля.

Рис. 1. Форма с нестандартными элементами

Начнём с однострочного текстового поля. Размеры картинки получились 328х46 пикселов, эти значения укажем в качестве ширины и высоты. Саму картинку ставим фоном с помощью свойства background . Изначально у текстового поля отображается рамка, чтобы она не портила вид её необходимо спрятать, задав свойство border со значением none (пример 1).

Пример 1. Текстовое поле

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Наше поле по высоте получается довольно большим по сравнению с полем по умолчанию, из-за этого возникают проблемы с выравниванием текста по центру в IE. Он будет выводиться по верхнему краю поля, что выглядит довольно небрежно. Для выравнивания используем свойство line-height со значением равным высоте поля заданным через height . На остальные браузеры это дополнение не окажет влияния, поэтому условными комментариями можно пренебречь.

Для многострочного текстового поля установка фона происходит аналогично. Но есть небольшое отличие — с правой стороны имеются кляксы, если мы вставим картинку фоном для

, то при появлении вертикальной полосы прокрутки она будет выводиться прямо по кляксам. При этом теряется эффект рамки. Поэтому фон добавим для блочного элемента, а

выведем уже в нём (пример 2).

Сюда же вставим и рисованную кнопку для отправки файла. Это делается через , в атрибуте src указываем путь к файлу, остальное браузер берет на себя.

Пример 2. Поле для ввода текста

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

По умолчанию текстовое поле имеет белый цвет фона, что нам совершенно не требуется, поэтому в свойствах задаём его прозрачным через значение transparent .

Браузеры несколько по-разному выводят полосу прокрутки, но эти изменения не настолько существенны, чтобы придавать им значение. К примеру, вид формы в Opera показан на рис. 2.

Рис. 2. Поле для ввода текста

В браузерах примеры отображаются корректно, только следует учесть два момента.

Данная статья посвященна тому, как с помощью одного лишь css и без использования скриптов научится создавать красивые поля ввода, поля выбора (input,select). Для этого нам понадобится не только знания css, но и изображения, которые будут служить фоном полей. К сожалению, на чистом css пока еще невозможно делать такие вещи как закругление углов, поэтому нам остается два выбора: либо прибегать к использованию скриптов, либо пытатся сделать это при помощи css и фоновых изображений. У каждого способа конечно же есть свои недостатки и преймущества. Так как данная статья не о скриптах, мы на них и не будем останавливатся, детально рассмотрим метод с использованием css, для которого мы можем определить пусть не все, но многие преймущества и недостатки.

- Наверно самым большим недостатком использования фона в качестве оформления поля ввода является его непрактичность. В нынешнее время большинство сайтов в сети интернет используют cms, в которых все поля ввода генерируются без участия человека, веб-мастеру доступен лишь css для установки стилей элементов. Поэтому очень часто бывает просто невозможно использовать дополнительные контейнеры (div), чтоб создать так называемую css обвязку для css input. Выходов из этой ситуации несколько: можно отказатся от красивых css input и select и для оформления использовать стандартные css свойства, можно указать одинаковую фиксированную ширину и высоту для всех css input и select, тогда можно использовать одно изображение для оформления, а можно использовать css input в связке с кнопкой ввода, что немного развяжет нам руки и позволит сделать красивые, относительно эластичные, поля ввода. Почему я их назвал "относительно эластичные", Вы поймете дальше, при рассмотрении примеров.

Преймущества:

Преймущество у этого способа одно, но самое главное - это позволит нам избежать использования скриптов для оформления.

Создавать красивый css input мы будем с помощью следующего изображения:

А для создания формы поиска мы используем это изображение:

Красивый css input без скриптов

Первым шагом на пути к красивому и оригинальному input у нас будет установка базовых значений css стилей.

width : 206px ;
height : 24px ;
border : none ;
background : url('/images/sample_input.jpg') 0 0 no-repeat ;

Как видите, мы указали основные css стили для нашего input. Обязательно нужно установить ширину и высоту равными размерам фонового изображения. А также мы обнулили значение свойства border, так как по умолчанию у всех полей ввода установлена граница border. Ну и конечно же указали путь к изображению, которое будет использоватся в качестве фона для css input. Посмотрим, что из этого получилось:

Выглядит неплохо, правда? А попробуйте набрать текст в поле. Как видите выглядит не очень. Поэтому второе, что мы сделаем - это установим свойства для шрифта и внутренние отступы для текста от границ input.

Вот теперь, если ввести текст, то все выглядит хорошо. Как Вы могли заметить, по сравнению с первым вариантом css для input, изменились значения ширины и высоты. Так как мы применили внутренние отступы (padding) для поля ввода, к ширине и высоте input автоматически прибавились значения указанные в свойстве padding, поэтому мы уменьшили размеры, чтоб сумма их стала такой же как и раньше.

Хочу повторить, что этот способ подходит, если все поля ввода, для которых он применяется, будут одинаковых размеров.
Если же на сайте ширина input будет изменятся динамически, то этот способ не подходит.

Эластичный красивый css input

Если на сайте есть возможность "обвязать" input контейнерами div, то с его красивым оформлением проблем вообще не возникает. Единственная большая проблема - это вес страницы, так как для каждого поля ввода прийдется использовать до 8 контейнеров div. Почему до 8? - потому, что для самой сложной css обвязки необходимо максимум 8 слоев.

На нашем сайте существует статьи, в которых подробно описываются способы создания css обвязки, поэтому в данной статье мы на этом останавливатся подробно не будем, Вы можете самостоятельно ознакомится с этими статьями: Создание простой css обвязки блока., Создание css обвязки блока на градиентном фоне.. Я лишь покажу, как применить это в случае с полями ввода.

Изображения для эластичного css input

sample_input_02.jpg - изображение для заполнения input по всех ширине -
sample_input_01.jpg - левый уголок для поля ввода -
sample_input_03.jpg - правый уголок для поля ввода -

Стили для обвязки css input

background : url('/images/sample_input_02.jpg') 0 0 repeat-x ;
width : 100% ;
border : none ;
height : 24px ;
padding : 4px 0 ;

background : background:url('/images/sample_input_03.jpg') right top no-repeat ;
padding : 0 14px 0 16px ;

В приципе все должно быть понятно, но хотелось бы остановится на некоторых моментах:

.fill-input - это свойство указывает, какой будет ширина нашего input. Естественно можно использовать как точные значения, так и значения в других доступных измерениях.

.right-input input - так как для отступа слева от обвязки используется padding слева, то ширину равную 100% использовать нельзя, поэтому для отступа справа мы установили ширину равную 95%.

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

Эластичная форма поиска

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

Разрезаем изображение на составные части

В первую очередь нам необходимо разрезать исходное изображение на 2 составные части. При чем левую часть необходимо удленить, полученная ширина будет максимальной шириной поля ввода. В итоге мы получим следующие изображения:

Хочу заметить, что удленения изображения не приведет к сильному росту размера, так как используется формат .jpg, у которого есть свойство сжимать размер, если в изображении есть повторяющиеся части.

css стили для формы

background : url('/images/sample_form_02.jpg') 0 0 no-repeat ;
width : 130px ;
height : 24px ;
border : 0 ;
vertical-align : middle ;

Следует отметить, что для css input нужно использовать vertical-align:top , а для кнопки vertical-align:middle - это позволит выровнять по вертикали эти два элемента.

В итоге мы имеем форму, в которой можно изменять ширину поля ввода.

Выводы:

В данной статье мы рассмотрели 3 способа оформления для css input. У каждого из способов есть свои плюсы и минусы, но для создания красивых форм без использования криптов эти способы наиболее оптимальные.

Читайте также: