+7 (929) 933-22-96
Заказать обратный звонок

Стилизация input с примерами

Решения по стилизации формы. Стилизация input, button, а так же решения для select и input type="file"

Дата написания: 03.03.2018

Одним из главных элементов на странице являются формы и их оформление довольно тонкий момент при создании сайта. Одни из основных тегов формы — input, label, button, textarea и select.

input нужен для текстовых полей, радио кнопок, флажков, а так же для кнопок — reset, file, password и других
textarea — текстовая область, в которую можно ввести текст в несколько строк
select — это список с возможностью выбора одного значения, либо нескольких. Он может быть как выпадающим, так и статичным
label — устанавливает связь между элементами формы
button — отправка данных формы. От input type=submit отличается тем, что имеет более расширенные возможности при создании кнопки

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

В данной статье мы рассмотрим: как стилизовать форму и все ее элементы при помощи CSS и jQuery. Приступим.

Создадим с вами обыкновенную форму:



	... Сюда вводятся теги формы

input

Вот так он выглядит в HTML

Важно: тег input всегда должен иметь обязательный атрибут — type, с его него, мы говорим нашей форме, что она будет делать — hidden (скрытое поле), radio (переключатель), chekbox (чекбос), text (текст) или file (загрузка файла)

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

input {
	width: 300px;
	font-size: 13px;
	padding: 6px 0 4px 10px;
	border: 1px solid #cecece;
	background: #F6F6f6;
	border-radius: 8px;
}

Стилизация textarea

В HTML он выглядит так:

стандартно textarea имеет следующие параметры:

правый нижний угол области текста, можно растянуть мышкой по экрану
для IE имеется постоянный scroll (прокрутка)

устраним эти пустяки, для этого пропишем следующее:

textarea {
	/* = Убираем скролл */
	overflow: auto;

	/* = Убираем увеличение */
	resize: none;
	width: 300px;
	height: 50px;

	/* = Добавим фон, рамку, отступ*/
	background: #f6f6f6;
	border: 1px solid #cecece;
	border-radius: 8px 0 0 0;
	padding: 8px 0 8px 10px;
}

Готово. Наше поле с текстом стало более красивым. Но мы с вами идем дальше и переходим к radio.

Стилизация input radio

в HTML он выглядит так:

Важно: чтоб radio переключались между собой, необходимо задать группе одинаковый name

Бытует мнение что input не поддается стилизации в CSS, развеем этот миф.

Создадим label для того что бы при нажатии на название и «псевдокнопку» сработал radio input.
Внутри label создаем input и задаем ему type=radio.
После input добавляем пустой div и текст для input.


Да
Нет

В CSS будем использовать checked, before, а так же + для обращения к соседним селекторам.

/* = стилизуем текст */
label {
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

/* = скрываем input */
input {
    display: none;
}

/* = стилизуем кнопку, которая работает вместе с input */
.stlradio {
    display: inline-block;
    border: 2px solid #b2b1b1;
    width: 16px;
    height: 16px;
    position: relative;
    vertical-align: middle;
    box-sizing: border-box;
    margin-right: 4px;
    border-radius: 300px;
    background-color:#ffffff;
}

/* = делаем скрытую точку в нашем div */
.stlradio:before {
    content: '';
    background: #1c1e25;
    width: 8px;
    height: 8px;
    opacity: 0;
    transition: 0.3s;
    position: absolute;
    top: 2px;
    left: 2px;
    border-radius: 300px;
}

/* = включаем точку если input активен */
input:checked + .stlradio:before {
    opacity: 1;
}

В итоге мы получаем вот такой результат

Да

Нет

Стилизация input checkbox

в HTML он выглядит так:

Для стилизации checkbox будем использовать такие же манипуляции, как и с radio


Да

Отличается CSS checkbox от radio только отсутствием border-radius

/* = стилизуем текст */
label {
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

/* = скрываем input */
input {
    display: none;
}

/* = стилизуем кнопку, которая работает вместе с input */
.stlchek {
    display: inline-block;
    border: 2px solid #b2b1b1;
    width: 16px;
    height: 16px;
    position: relative;
    vertical-align: middle;
    box-sizing: border-box;
    margin-right: 4px;
}

/* = делаем скрытый квадратик в нашем div */
.stlchek:before {
    content: '';
    background: #1c1e25;
    width: 8px;
    height: 8px;
    opacity: 0;
    transition: 0.3s;
    position: absolute;
    top: 2px;
    left: 2px;
}

/* = включаем квадратик если input активен */
input:checked + .stlchek:before {
    opacity: 1;
}

В итоге мы получаем вот такой результат

Да

Стилизация select

Обычно, select описывается в HTML документе так:

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

Приступим. Разметка HTML:


	Выберите Ваше лучшее качество:
	
		Красивый(ая)
		Умный(ая)
		Коммуникабульный(ая)
		Скромный(ая)

Стилизуем всё это добро

/*	=	Select */
.slct {
	display: block;
        border-radius: 5px;
        border: 1px solid #cecece;
        background-color: transparent;
        text-decoration: none;
        width: 285px;
        padding: 10px 15px 10px 10px;
        color: #fff;
        background-position: 290px -145px;
	/*
		Супер финт обрезаем текст
		чтобы не вылезал за рамку
	*/
	overflow: hidden;
	white-space:nowrap;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;	
}
.slct.active {
	border-radius: 5px 5px 0 0;
	border-bottom: none;
}
.drop {
	margin: 0;
	padding: 0;
	width: 310px;
	border: 1px solid #cecece;
	border-top: none;
	display: none;
	position: absolute;
	background: #fff;
}
.drop li {
	list-style: none;
	border-top: 1px dotted #e8e8e8;
	cursor: pointer;
	display: block;
	padding: 4px 15px 4px 25px;
	background-position: 10px -119px;
}
.drop li a {
	color: #444;
}
.drop li:hover {
	background-color: #e8e8e8;
}
.drop li:hover a {
	color: #222;
}

собственно сам код скрипта для нашего селекта

// Select
$('.slct').click(function(){
	/* Заносим выпадающий список в переменную */
	var dropBlock = $(this).parent().find('.drop');

	/* Делаем проверку: Если выпадающий блок скрыт то делаем его видимым*/
	if( dropBlock.is(':hidden') ) {
		dropBlock.slideDown();

		/* Выделяем ссылку открывающую select */
		$(this).addClass('active');

		/* Работаем с событием клика по элементам выпадающего списка */
		$('.drop').find('li').click(function(){

			/* Заносим в переменную HTML код элемента
			списка по которому кликнули */
			var selectResult = $(this).find('a').data('znach');
			var selectResultName = $(this).find('a').html();

			/* Находим наш скрытый инпут и передаем в него
			значение из переменной selectResult */
			$(this).parent().parent().find('input').val(selectResult);

			/* Передаем значение переменной selectResult в ссылку которая
			открывает наш выпадающий список и удаляем активность */
			$(this).parent().parent().find('.slct').removeClass('active').html(selectResultName);

			/* Скрываем выпадающий блок */
			dropBlock.slideUp();
		});

	/* Продолжаем проверку: Если выпадающий блок не скрыт то скрываем его */
	} else {
		$(this).removeClass('active');
		dropBlock.slideUp();
	}

	/* Предотвращаем обычное поведение ссылки при клике */
	return false;
});

Выглядеть будет это так:

Выберите Ваше лучшее качество:

Красивый(ая)
Умный(ая)
Коммуникабульный(ая)
Скромный(ая)

Стилизация Input file

type=file отображает на странице кнопку, с помощью которой можно выбрать файл. И блок в котором мы видим сам выбранный файл. Давайте рассмотрим стилизацию input file.

Создаем разметку следующего характера

/*	=	File Load */
/* Стили для контейнера */
.file-load-block {
	width: 310px;
	height: 35px;
	overflow: hidden;
	position: relative;
}
/* работаем с инпутом который конкретно file */
.file-load-block input[type=file] {
	/* делаем кроссбраузерную прозрачность */
	opacity: 0;
	filter: alpha(opacity=0);

	/* Позиционируем абсолютно отсносительно контейнера по правому краю */
	position: absolute;
	top: 0;
	right: 0;

	/*
	Задаем высоту и делаем шрифт огромным
	для того чтобы кнопка "обзор" занимала все пространство контейнера
	*/
	height: 35px;
	font-size: 600px;

	/* Ставим наш инпут поверх всего содержимого */
	z-index: 2;
	cursor: pointer;
	width: auto;
}
/* Стилизируем инпут и кнопку которые под загрузчиком */
.file-load-block input[type=text] {
	    z-index: 1;
    width: 206px;
    padding-right: 10px;
    white-space: nowrap;
    text-overflow: ellipsis;
    border: 1px solid #ccc;
    background: #fff;
    color: #000;
    -o-text-overflow: ellipsis;
    padding: 5px 15px;
    border-radius: 5px;
}
.file-load-block button {
	position: absolute;
	right: 0;
	top: 0px;
	width: 90px;
	height: 28px;
	border: 1px solid #ccc;
	background: #fff;
	color: #666;
	border-radius: 5px;
	box-shadow: inset 0 2px 2px #ccc;
}
.file-load-block .button-hover {
	box-shadow: 0 0 2px #ccc;
}

Здесь я воспользовался небольшим хаком) обычный input делаем невидимым с помощью opacity. И задаем шрифт большого размера, наша кнопка станет большой и закроет весь container.

Под input который выводит загрузочный popup, расположим input. Он будет выводить название файла, который загружаем на сервер и кнопку выбора файла.

Добавим немного script’a. Он будет показывать название нашего файла, который прикрепили, добавим hover для кнопки когда input получает фокус:

// = Load
// отслеживаем изменение инпута file
$('#file').change(function(){
	// Если файл прикрепили то заносим значение value в переменную
	var fileResult = $(this).val();
	// И дальше передаем значение в инпут который под загрузчиком
	$(this).parent().find('.fileLoad').find('input').val(fileResult);
});

/* Добавляем новый класс кнопке если инпут файл получил фокус */
$('#file').hover(function(){
	$(this).parent().find('button').addClass('button-hover');
}, function(){
	$(this).parent().find('button').removeClass('button-hover');
});

В итоге мы получаем:

Стилизация input reset

Иногда требуется сброс для формы.
Создаем разметку.

Накинем стилей

/*	=	Reset Form */
.reset-form button {
	width: 90px;
	height: 28px;
	border: 1px solid #ccc;
	background: #fff;
	color: #666;
	border-radius: 5px;
	box-shadow: inset 0 2px 2px #ccc;
	cursor: pointer;
}
.reset-form button:hover {
	box-shadow: 0 0 2px #ccc;
}
.reset-form button:active {
	margin-top: 1px;
	margin-bottom: -1px;
	zoom: 1;
}

Для чего jQuery?

Например, мы отправили форму и автоматически заполнили ее опять через PHP. Нажимая на стандартную кнопку reset у нас, она не сработает. А если использовать скрипт, то форма успешно очистится

//Reset form
// Вешаем событие клика по кнопке сброса
$('.reset-form').click(function() {
	// Устанавливаем пустое значение в атрибут value для всех инпутов
	$('.customForm').find('input').val('');

	// Убираем атрибут checked и класс активности у чекбоксов
	$('.customForm').find('input:checked').removeAttr('checked');
	$('.customForm').find('.check').removeClass('active');

	// Убираем класс активности у радио переключателей
	$('.customForm').find('.radio').removeClass('active');

	// Устанавливаем пустое значение в атрибут value для всех textarea
	$('.customForm').find('textarea').val('');

	// И для открывалки селекта возвращаем начальное значение
	$('.customForm').find('.slct').html('Выберите Ваше лучшее качество:');
	return false
});

Стилизация input submit

Важно: не рекомендую использовать input type=submit. Потому что его нельзя стилизовать картинками, блоками, иконками. Используйте button

Стилизация button

Благодаря атрибуту type=submit, он сообщает о том что при нажатии на button данные формы передадутся на сервер.

В HTML он добавляется так

Поднакинем стиля

.submit {
	cursor: pointer;
	border: 1px solid #cecece;
	background: #f6f6f6;
	box-shadow: inset 0px 20px 20px #ffffff;
	border-radius: 8px;
	padding: 8px 14px;
	width: 120px;
}
.submit:hover {
	box-shadow: inset 0px -20px 20px #ffffff;
}
.submit:active {
	margin-top: 1px;
	margin-bottom: -1px;
	zoom: 1;
}
.submit:focus
{
	outline:none;
}