Формы, пожалуй, один из самых важных элементов на странице и их стилизация щекотливый момент при верстке. Главное назначение форм это обмен информации между пользователем и сервером. Самые часто используемые теги форм — input, textarea, select, label.

Кликнув по кнопке «Демо» можете наглядно увидеть какой результат мы получим в конце урока. Нажав на исходники Вы можете скачать абсолютно весь исходный код вместе с комментариями.

Введение

  • Тег input предназначен для создания текстовых полей, кнопок (submit, button, file, text), переключателей (radio) и флажков (checkbox).
  • Тег texarea — используется для создания текстового поля для ввода нескольких строк текста.
  • Тег select применяется для создания выпадающего списка в котором можно сделать один или множественный выбор.
  • Тег label — для подписи к элементам форм.

Стилизация всех элементов форм с помощью CSS и jQuery

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

В этом практикуме я продемонстрирую как с помощью CSS и jQuery стилизовать эти элементы. Начнем с самых простых, а как окажется позже вся стилизация очень простая. Приступим.

Для начала создадим обычную форму, самую простую:

<form action="#" method="post">

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

</form>

Первым рассмотри тег Input.

Input

В HTML его выводят вот таким способом:

<input type="text" id="text" name="text" value="some text" />

Обязательным параметром тега input является атрибут type (тип, это может быть текст [text], кнопка отправки [submit], скрытое поле [hidden], переключатель [radio], чекбокс [checkbox], загрузка файла[file]).

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

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

Иногда для Internet Explorer 8 нужно увеличить высоту на 1px, чтобы тег соответствовал дизайну, тогда в стилях нужно добавить хак для IE:

input {
	padding-bottom: 5px\0;
}

Вот и все тайны связанные с этим тегом. Дальше рассмотри тег для ввода нескольких строк текста textarea.

Textarea

Данный тег на HTML страницу выводится так:

<textarea></textarea>

по умолчанию у этого тега присутствуют некоторые параметры:

  • за правый нижний угол текстовой области можно потянуть мышкой и текстовая область будет увеличиваться
  • справа присутствует постоянная прокрутка в браузерах IE

уберем эти мелочи, открываем наш файл стилей и пишем следующие свойства:

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.

Radio Button

На HTML странице радио переключатели выводятся так:

<input type="radio" id="radio1" />
<input type="radio" id="radio2" />
<input type="radio" id="radio3" />

К сожалению, стилизации с помощью CSS эти волшебные переключатели не поддаются, но есть jQuery и все будет круто. Суть моего метода очень простая: вместо тегов input я буду писать столько тегов div сколько предполагалось переключателей, плюс в них буду вносить текст с заданными значениями и будет всего лишь один скрытый input, в который будет заносится текстовое значение с нажатого div’a. теперь давайте реализуем эту идею.

Для начала создадим HTML разметку:

Выберите Ваше лучшее качество:
<div class="radioblock">
	<div class="radio">Красивый(ая)</div>
	<div class="radio">Умный(ая)</div>
	<div class="radio">Коммуникабульный(ая)</div>
	<div class="radio">Скромный(ая)</div>
	<div class="clear"></div>

	<input type="hidden" />
</div>

Теперь стили. Каждый div будет иметь фоновую картинку пустого переключателя (именно ее Вы сможете поменять на свою любимую или ту что Вам нарисует дизайнер), а если по div’у произошло событие клика то ему еще добавится класс active и сменится фоновое изображение на включенный переключатель

.radio {
	display: block;
	height: 25px;
	background-position: 0 -56px;
	coloR: #444;
	cursor: pointer;
	text-indent: 22px;
	font-size: 13px;
}
.radio.active {
	background-position: 0 -86px;
}

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

Наконец-то дошла очередь до jQuery (:

// RadioButton
$('.radioblock').find('.radio').each(function(){
	$(this).click(function(){
		// Заносим текст из нажатого дива в переменную
		var valueRadio = $(this).html();
		// Находим любой активный переключатель и убираем активность
		$(this).parent().find('.radio').removeClass('active');
		// Нажатому диву добавляем активность
		$(this).addClass('active');
		// Заносим значение объявленной переменной в атрибут скрытого инпута
		$(this).parent().find('input').val(valueRadio);
	});
});

Если посмотреть работу данного скрипта через firebug для Firefox или через средства разработки Google Chrome, то картина будет более наглядной.

Давайте займемся теперь стилизацией чекбоксов.

Checkbox

Чекбоксы выводятся на HTML страницу таким же методом как и radio переключатели:

<input type="checkbox" id="checkbox1" />
<input type="checkbox" id="checkbox2" />
<input type="checkbox" id="checkbox3" />

Со стилизацией с помощью одного CSS тут та же история, что и с radio кнопками. Для стилизации чекбоксов нужен немного другой логический подход: выводим столько чекбоксов сколько задано но вместо атрибута checkbox ставим атрибут hidden и перед каждым input’ом добавим div:

<div class="checkboxes">
	<div class="check">
		jQuery
		<input type="checkbox" value="jQuery" />
	</div>
	<div class="check">
		HTML
		<input type="checkbox" value="HTML" />
	</div>
	<div class="check">
		CSS
		<input type="checkbox" value="CSS" />
	</div>
	<div class="check">
		PHP
		<input type="checkbox" value="PHP" />
	</div>
	<div class="check">
		MySql
		<input type="checkbox" value="MySql" />
	</div>
</div>

дальше добавим стилей, для активного и неактивного чекбокса

/*	=	CheckBox */
/* Стилизируем чекбокс, точнее скрываем его */
.check input[type=checkbox] {
	position: absolute;
	left: -10000px;
}
.check {
	background-position: 0 3px;
	padding-left: 25px;
	cursor: pointer;
	position: relative;
}
.check.active {
	background-position: 0 -27px;
}

теперь очередь jQuery:

// Checkbox
// Отслеживаем событие клика по диву с классом check
$('.checkboxes').find('.check').click(function(){
	// Пишем условие: если вложенный в див чекбокс отмечен
	if( $(this).find('input').is(':checked') ) {
		// то снимаем активность с дива
		$(this).removeClass('active');
		// и удаляем атрибут checked (делаем чекбокс не отмеченным)
		$(this).find('input').removeAttr('checked');

	// если же чекбокс не отмечен, то
	} else {
		// добавляем класс активности диву
		$(this).addClass('active');
		// добавляем атрибут checked чекбоксу
		$(this).find('input').attr('checked', true);
	}
});

А теперь займемся селектами:

Select

На HTML страничку селекты выводятся так:

<select>
	<option value="">Укажите возраст</option>
	<option value="0 - 12 месяцев">0 - 12 месяцев</option>
	<option value="1 - 3 года">1 - 3 года</option>
	<option value="3 - 5 лет">3 - 5 лет</option>
	<option value="Больше 5 лет">Больше 5 лет</option>
</select>

Реально кучу плагинов jQuery для их стилизации, но мой метод я считаю самый правильный, суть его такая же как и в случае с radio кнопками, только здесь вместо дивов будет использоваться список, который выпадает по клику на ссылку, а потом при клике на ссылку из выпадающего списка ее текстовое значение будет заносится в скрытый инпут и в первую ссылку по которой кликнули. Все очень просто)))

HTML рзаметка выглядит следующим образом:

<div class="select">
	<a href="javascript:void(0);" class="slct">Выберите Ваше лучшее качество:</a>
	<ul class="drop">
		<li><a href="">Красивый(ая)</a></li>
		<li><a href="">Умный(ая)</a></li>
		<li><a href="">Коммуникабульный(ая)</a></li>
		<li><a href="">Скромный(ая)</a></li>
	</ul>
	<input type="hidden" id="select" />
</div>

Теперь добавим стилей для всего этого дела

/*	=	Select */
.slct {
	display: block;
	border-radius: 5px;
	border: 1px solid #cecece;
	background-color: #F6F6f6;
	width: 285px;
	padding: 4px 15px 4px 10px;
	color: #444;
	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;
	color: #444;
	padding: 4px 15px 4px 25px;
	background-position: 10px -119px;
}
.drop li:hover {
	background-color: #e8e8e8;
	color: #222;
}

ну и без jQuery опять никуда:

// 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).html();

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

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

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

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

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

Дальше займемся кнопками загрузить изображение и кнопкой отправкой формы.

Input type=file

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

Итак для стилизации кнопки нужно создать следующую разметку:

<div class="fileload">
	<h2>Загрузка файла:</h2>
	<div class="file-load-block">
		<input type="file" value="" id="file" />
		<div class="fileLoad">
			<input type="text" value="Select file" />
			<button>Select file</button>
		</div>
	</div>
</div>

Которой добавим таких стилей:

/*	=	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: 190px;
	padding-right: 10px;
	white-space:nowrap;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
}
.file-load-block button {
	position: absolute;
	right: 0;
	top: 2px;
	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;
}

Тут я сделал такой финт: стандартный инпут делаем прозрачным и задаем огромный шрифт, чтобы кнопка обзора была достаточно большой и закрывала весь контейнер, позиционируем его абсолютно по правому краю контейнера (потому что курсор-рука появялется тока на кнопке «обзор»).

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

Теперь добавим script который будет показывать имя прикрепленного файла и еще напишем хувер для кнопки если загрузчик получил фокус:

// = 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');
});

Как оказалось ничего сложного.

Дальше займемся кнопкой сброса формы (reset form).

Input type=reset

Сброс формы иногда очень-очень нужен, а там как мы добавили стилизацию почти всех элементов форм то двайте разберемся как их сбросить, потому что стандартный reset не сработает (верней сработает но не на всех элементах)

Делаем разметку:

<div class="reset-form">
	<h2>Сбрасываем поля формы</h2>
	<button>Сброс</button>
</div>

Пишем скрипт:

//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
});

И добавим стилей кнопочке сброса:

/*	=	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;
}

Вот опять все просто)

И заключительным этапом будет кнопка отправки формы.

Input type=submit

Как я уже писал выше, тег инпут предназначен не только для полей ввода, переключателей и чекбоксов, с его помощью так же делаются кнопки. Делают их корректным объявлением  атрибута type: button или submit, атрибут submit говорит о том что при клике на этот инпут данные из формы будут переданы на сервер. На страничку его добавляют так:

<input type="submit" class="submit" value="Отправить" />

а теперь немножко стилей:

.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;
}

Заключение

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

Добавить комментарий:


Комментарии
  1. Григорий

    Добрый день. Интересно как на одной странице использовать 2 селекта.
    я столкнулся с проблемой что они оба заполняются одинаковым значением li, а при смене класса .slct на другое (.slct_1 например) перестаёт выполняться предотвращение обычного поведения ссылки при клике.

  2. JAH

    Григорий, можно добавить перебор ссылок .slct:

    $('.select').find('.slct').each(function(){
    
    	$(this).click(function(){
    		...
    		return false
    	});
    });
    

    не забудьте скрытым инпутам поставить разные идентификаторы

  3. Антон

    JAH я в знак благодарности стал закидывать твои страницы на surfingbird_ru, и смотрю ты пользуешся популярностью там. 🙂

  4. JAH

    Антон, bigUp

    очень благодарен

  5. JAH

    Григорий, напишите на почту плз, в левом нижнем углу ссылка

  6. Ivan

    Все отлично работает, спасибо. Но возникла одна ситуация с элементом checkbox
    Представьте ситуация, что выводим форму, например настройки сайта, и некоторые чекбоксы по умолчанию должны быть отмечены. Так вот просто добавление checked="checked" не работает
    Решил вот так
    При выводе элемента checkbox на страницу, если он должен быть отмечен — добавляем checked="checked" и плюс в обработчик script.js необходимо добавить сл. код

    /*if get values from DB*/
    	$('.checkboxes').find('.check').each(function(){
    	if( $(this).find('input').is(':checked') ) {
    		// добавляем класс активности диву
    			$(this).addClass('active');
    			// добавляем атрибут checked чекбоксу
    			$(this).find('input').attr('checked', true);
    		}
    	});
    
  7. Макс

    Тааак..)
    а как сделать, чтоб имя выбранного файла появлялось на всех полях выбора изображения, если их больше одного?

    P.S. спасибо большое!

  8. Сергей

    А каким образом в input type=radio передавать значения value, но не те которые показываются пользователю, а свои? Тоже самое и для select. Каким образом можно сделать значения переключателя, которое будет видеть пользователь равно кошка, собака и т.д. А данные, которые впоследствии будут переданы равны: 5 и 6 соответственно ?

  9. JAH

    Ivan, чтобы чекбокс был отмечен сразу нужно родительскому диву добавить класс active а инпуту добавить атрибут checked="checked".

    Ваше решение тоже верное)

  10. JAH

    Сергей, нужно чтобы передавать свое значение можно воспользоваться атрибутами name или lang, вот так:

    <div class="radioblock">
    	<div class="radio" name="самый лучший день">Good</div>
    	<div class="radio" name="самый плохой день">Bad</div> 
    	<input type="hidden" />
    </div>

    тогда скрипт слегка поменяется, тоесть в переменную будем заносить текст из атрибута name()

    $('.radioblock').find('.radio').each(function(){
    	$(this).click(function(){
    		// Заносим текст из нажатого дива в переменную
    		var valueRadio = $(this).attr('name');
    		// Находим любой активный переключатель и убираем активность
    		$(this).parent().find('.radio').removeClass('active');
    		// Нажатому диву добавляем активность
    		$(this).addClass('active');
    		// Заносим значение объявленной переменной в атрибут скрытого инпута
    		$(this).parent().find('input').val(valueRadio);
    	});
    });
  11. Максим

    Подскажите пожалуйста по подробнее, как решить проблему, которая описана у Григория в 1-ом комментарии. У меня на форме 4 селекта, и при выборе элемента в каком-либо из них — они меняется у всех 4-ех.

  12. JAH

    Максим, отправил на почту ответ, тут тоже поправлю по возможности

  13. Джэй

    Проблема с checkbox в FF версия-16

    Если мы выделим checkbox, и перезагрузим страницу, checkbox станет активным только при втором клике. Видимо проблема с куками.

  14. JAH

    Джэй, нужно просто добавить проверку, до клика, вот так:

    if($('check').find('input').has(':checked')){
    	$(this).parent().addClass('active')
    }
  15. Джэй

    JAH, Спасибо, твои методы очень удобны.

  16. Джэй

    JAH, к сожалению не помогло. У тебя там не большые опечатки.

  17. Сергей

    Извините за повтор, просто ответ здесь не нашел. У меня на форме 3 селекта, и при выборе элемента в каком-либо из них — они меняется у всех 3-ех.

    Сейчас так:

    $(‘.select’).find(‘.slct’).each(function(){
    $(this).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).html();

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

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

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

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

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

    не работает

  18. JAH

    Сергей, это у меня нету времени исходник поправить сори…

    на блоге в этой статье правки внесены в этой строке

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

    должны все три заработать)

  19. Сергей

    Спасибо большое!
    Все заработало.

  20. TeraMoune

    Всем привет, можите написать строчку для select, которая скрывала бы droplist если кликнуть в другую часть страници. Тоесть не обезательно по селекту нажать для его скрытия но и вобще везде.
    Заранее спасибо.

  21. Culttm

    2TeraMoune
    примерно это надо добавить в код. А точнее в ту часть где проверяется открыт ли ‘dropBlock’

    		$("html ,  body").live('mousedown', function(e) {
    					e.stopPropagation(); 
    					dropBlock.slideUp();
    				});
    				
    				dropBlock.find('*').live('mousedown', function(e) {
    					e.stopPropagation();          
    				});
    
  22. JAH

    TeraMoune, Culttm так наверно будет проще:

    $(document).click(function() {
    	$('.slct').removeClass('active').parent().find('.drop').slideUp();
    });
  23. Culttm

    JAH
    так и так думаю верно)) http://jsfiddle.net/TheCult/nYttd/

  24. Дмитрий

    У селекта видно как снизу него все пригает вверх на один пиксель стоит ипользовать

    .slct.active {
    	border-radius: 5px 5px 0 0;
    	border-bottom: none;
            margin-bottom: 1px;
    }

    Не так катастрофически но получается куда приятней.

  25. Rom

    Как быть с радиобатонами — если нужно передавать не html(), а значение кодовое 1-2-3-4
    можно ли тегу div присвоить value=1 и передавать value?

  26. JAH

    Rom, все можно) но лучше через атрибут name или lang, вот так:

    <div class="radio" name="1 или все что хочешь">блаблабла)</div>

    а в скрипте поменять определение переменной:

    var valueRadio = $(this).attr('name');
  27. Rom

    ЗБАЗИБА! 7 лет не делал ничего на ХТМЛ — но благодаря вам быстро разобрался.

  28. Дмитрий

    Здорово расписано. Спасибо. Плачевно только создавать код такими объёмами…

  29. Анатолий

    Хорошая статья. Благодарю

  30. Мирослав

    Добрый день! Спасибо за замечательную статью.

    Возник вопрос — как в селекте задать элемент списка, который бы работал как тег (не выделялся как обычный элемент списка и его нельзя было выбрать)?

  31. JAH

    Мирослав, можно добавить класс к такому элементу списка li
    например:

    <li class="not_click">Разделитель в селекте</li>

    а в скрипте для селекта нужно уточнить по каким li можно кликать:

    $('.drop').find('li:not(li.not_click)').click(function(){ ... });
  32. Мирослав

    Спасибо за помощь!
    Можно было бы вот таким способом реализовать
    $(‘.drop’).find(‘li.not_click’).mousedown(function(){ return false; });
    Но в таком случае пришлось бы остальным li присваивать класс.
    Ваше решение изящнее)

  33. вапвап

    Для чекбокса лучше использовать (тк работа через attr в новых версиях jquery deprecated):
    // Отслеживаем событие клика по диву с классом checkboxes

        $('.checkboxes').on('click','.check',function(){
            $(this).toggleClass('active');
            $(this).find('.check_inner_img').toggleClass('check_inner_img__active');
            var $input = $(this).find('input');
            // Пишем условие: если вложенный в див чекбокс отмечен
            if( $input[0].checked) {
                // и удаляем атрибут checked (делаем чекбокс не отмеченным)
                $input.prop('checked', false);
            } else {;
                // добавляем атрибут checked чекбоксу
                $input.prop('checked', true) ;
            }
        });
  34. Денис

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

    Володь, было бы вообще супер, если выделишь отдельную тему на это (активация элементов form, элементами form).
    Очень хочется увидеть внятные примеры по активации (списка, чекбоксом, радио и любые другие комбинации). Для это надо скрипты, хоть и в пару строк, но они нужны.

  35. Денис

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

    $(document).ready(function(){
    	$(".radioclassir").change(function(){
    		if($(this).is(":checked")){
    			$(".rselectedir:not(:checked)").removeClass("rselectedir");
    			$(this).next("label").addClass("rselectedir");
    			$(".rselectedli:not(:checked)").removeClass("rselectedli");
    			$(".rselectedgl:not(:checked)").removeClass("rselectedgl");
    		}
    	});
    	$(".radioclassli").change(function(){
    		if($(this).is(":checked")){
    			$(".rselectedli:not(:checked)").removeClass("rselectedli");
    			$(this).next("label").addClass("rselectedli");
    			$(".rselectedir:not(:checked)").removeClass("rselectedir");
    			$(".rselectedgl:not(:checked)").removeClass("rselectedgl");
    		}
    	});
    	$(".radioclassgl").change(function(){
    		if($(this).is(":checked")){
    			$(".rselectedgl:not(:checked)").removeClass("rselectedgl");
    			$(this).next("label").addClass("rselectedgl");
    			$(".rselectedir:not(:checked)").removeClass("rselectedir");
    			$(".rselectedli:not(:checked)").removeClass("rselectedli");
    		}
    	});
    
    
    
        
    $('select').attr("disabled",true);
    
    $('#iris').click(function(){
        $('select').attr("disabled",true);
        $('#select1').attr("disabled",false);
    });
    $('#lil').click(function(){
        $('select').attr("disabled",true);
        $('#select2').attr("disabled",false);
    });
    $('#glad').click(function(){
        $('select').attr("disabled",true);
        $('#select3').attr("disabled",false);
    });
    
    });
    
    	
    	
    	Ирисы
    	
    	   Высокие бородатые
    	   Бордюрные
    	   Карлики
               Высокие миниатюрные
               Интермедия
    	
    	
    	Лилейники
    	
    	   Крупноцветковые
               Мелкоцветковые
    	   Махровые
    	
    	
    	Гладиолусы
            
    	   Белые
    	   Голубые и фиолетовые
    	   Дымчатые и коричневые
               Зеленые
               Красные
               Кремовые и желтые
               Лососево-розовые
               Малиновые
               Палевые и оранжевые
               Розовые
               Сиреневые
    	
    	
    
  36. Seph

    Какой шрифт использовался на первом скрине?

  37. JAH

    Seph, это Helvetica

  38. Тито

    Уважаемый JAH

    У меня в голову не лезет как можно заставить конкретный select (то-есть тот, на который нажали) отправлять значение в свой input. Открываются они все. Вопрос родился не от большого ума, потому прошу извинить если приходится снова все пережевывать. В комментариях видел похожие случаи но ответа не нашел.

  39. JAH

    Тито, для каждого селекта есть свой контейнер class="select". Внутри он содержит: список ul, ссылку которая показывает выбор и скрытый инпут в который передается выбранное значение списка.

    за передачу выбранного значения отвечает следующий код:

    $('.drop').find('li').click(function(){
    	var selectResult = $(this).html();
    	$(this).parent().parent().find('input').val(selectResult);
    	$('.slct').removeClass('active').html(selectResult);
    	dropBlock.slideUp();
    });

    тоесть при клике на элемент списка li в переменную selectResult заносится текстовое значение элемента li

    следующим шагом мы перемещаемся по контейнеру class="select" и находим скрытый инпут и помещаем в его атрибут value значение selectResult, потом скрываем выпадающий список

  40. Георгий

    при использовании новых версий jquery работает не совсем корректно, а все потому, что — http://jquery.com/upgrade-guide/1.9/#attr-versus-prop-

  41. JAH

    Георгий, в ближайшем будущем обновлю материал, сейчас делаю новый дизайн)

  42. Vadim

    Админ, хотелось бы услышать твое мнение: этот код не слишком универсален, т.е. при других классах к примеру придется лезть в сами скрипты, менять их — не слишком удобно. Может лучше делать такие штуки в виде плагинов? Подключил, указал классы элементов (и/или другие параметры) и т.д.?

  43. Vadim

    P.S. И вот еще адский недостаток — нельзя переключаться между элементами табами. Придется искать другой способ.

  44. JAH

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

    По поводу табов, данный скрипт никак не влияет на табы.
    ПС. в ближайшем будующем статья обновится 😉

  45. Vadim

    В общем вот: http://jsfiddle.net/5R7Gx/1/. Переделал вариант с радиобатонами, не плагином правда, но имхо этот вариант лучше: стандартный функционал сохранен, фокус ловит, между батонами можно переключаться стрелками на клавиатуре, поля сгруппированы, нет JS — получаем обычные кнопки)

  46. JAH

    Vadim, получилось прикольно, в принципе в радиокнопками в теге label это стандартная штука jquery user interface

    так для того чтобы расширить свои познания можешь качнуть http://dimox.name/jquery-form-styler/ — Dimox написал замечательный плагин, в не сжатой версии можно дописать все что угодно под свои нужды

  47. Vadim

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

  48. JAH

    Vadim, заходи, буду рад) писал бы больше но времени нету как всегда(

  49. Анна

    Скажите пожалуйста что нужно добавить чтобы при клике на другой селект закрывался предыдущий(открытый)? Это можно реализовать?

  50. JAH

    Анна, нужно дописать пару строчек, вот так:

    	$('.sltc').removeClass('active');
    	$('.select').find('ul').slideUp();
    	/* Заносим выпадающий список в переменную */
    	var dropBlock = $(this).parent().find('.drop');
  51. Klim

    Спасибо за сайт.

    По делу. В jQuery 1.9+ в разделе чекбоксов строки

    $(this).find(‘input’).removeAttr(‘checked’);

    $(this).find(‘input’).attr(‘checked’, true);

    заменил соответственно на

    $(this).find(‘input’).prop(‘checked’, false);

    $(this).find(‘input’).prop(‘checked’, true);

    В противном случае чекбоксы бастовали.

    В разделе селектов. Если в хромовском отладчике поставить прерывание на стр. 409 исходника демо (выбор li в открывшемся дропбоксе)

    var selectResult = $(this).html();

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

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

    /* Скрываем выпадающий блок */
    $(this).parent(‘.drop’).slideUp();

    из тела

    $(‘.slct’).click(function(){

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

    Может, кому-то пригодится. Еще раз спасибо за тему — очень пригодилось. Просто, без наворотов и подключения непонятных сторонних плагинов.
    Что до плагина Dimox’а, то, может, он и хорош, да только в старых IE он работает безобразно, что лично меня печалит.

  52. JAH

    Klim, спасибо за коммент)
    статья старенькая, но рабочая) в ближайшем будущем планирую ее слегка модифицировать

  53. Дарья

    Зачем делать инпут абсолютом и сдвигать отрицательным марджином, если есть display:none ?

  54. JAH

    Дарья, потому что Вы не сможете оперерировать атрибутом checked

  55. Александр

    Автору большое спасибо!
    На странице 4 selecta, и все прекрасно работают!
    Поначалу были проблемы, отмеченные выше,
    но разобрался, и все отлично!

  56. Антон

    «Radio Button» — и чексбоксы. «я буду писать столько тегов div сколько предполагалось переключателей» — лучше использовать тег с атрибутом for. тогда скрипт не нужен.

  57. JAH

    Антон, обрати внимание на дату публикации) и твой вариант в ие7-8 не будет работать а в то время он очень нужен был. Благодаря CSS3 конечно же лучше использовать label

  58. betonka.pro

    Живые примеры можно посмотреть на отдельной странице . Стоит заметить, что при оформлении элементов форм не использовано ни одного изображения, только CSS. У меня селект в Хедере, соответственно распространяется влияние на селекты на страницах. Как защитить другие селекты от изменений?

  59. JAH

    Добавить уникальный класс на блок с селектом который нужно оформить