Oct 31 2013 at 20:05

Стилизация элементов ввода без JavaScript

Invite pending

Введение

Всем известно, что некоторые элементы HTML очень плохо поддаются стилизации. То есть нельзя просто так взять и при помощи HTML+CSS заставить, например,

HTML выглядеть точно так, как нарисовано в макете. Зачастую верстальщики прибегают к решениям вроде плагинов jQuery. Если хотите узнать, как стилизовать радиокнопки и поля с выпадающим списком на чистом HTML и CSS - добро пожаловать под кат.





Стилизация select


Речь пойдет именно о поле с выпадающим списком.

Единственное, что сложно изменить в нем, используя только HTML и CSS - это кнопка, по которой список раскрывается.

Я тот еще дизайнер, поэтому для примера буду использовать такой рисунок размера 48х24 для кнопки:



Снизу спрайт для поля с фокусом ввода, сверху - без фокуса.

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


<div class="select-outer">
	<select id="select" name="select" size="1">
		<option>
			Ubuntu
		</option>
		<option>
			Red Hat
		</option>
		<option>
			Debian
		</option>					
		<option>
			OpenSuse
		</option>
		<option>
			Fedora
		</option>					
	</select>
	<a class="select-button"></a>
</div>		




Я собираюсь скрыть стандартную кнопку за оберткой, а поверх обертки отобразить стилизованную. При этом кнопка должна быть ниже, чем CSS по оси Z, чтобы клики ею не перехватывались.


select {
	width: 200px;
	border: none;
	height: 22px;		/* Меньше, чем рисованная "кнопочка" на ширину нужного border'а */
	line-height: 22px;
	position: relative;		/* Это нужно, чтобы работал z-index */
	background: none;		/* Через прозрачный фон будет видно кнопку */
	z-index: 100;
}

.select-outer {
	border: #ccc 1px solid;
	background: #eee;
	width: 180px;		/* На 20px меньше, чем у select'а. Примерно такова ширина стандартной кнопки */
	overflow: hidden;		/* Кнопка будет находиться за пределами "обертки" */
	display: inline-block;
	position: relative;		/* Чтобы элементы с position:absolute позиционировались по "обертке" */

}

.select-button {
	background: url('select.png') center center no-repeat;
	height: 24px;		/* Размеры подготовленной картинки */
	width: 24px;
	position: absolute;		/* Размещаем объект по правому краю */
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 50;		/* И спускаем его на нижний слой - чтобы ссылка */
								/* не перехватывала событие щелчка от select'а */
}




Вот и всё! Получилось так:







Стилизация радиокнопок


Заменим стандартные радиобатоны на такие:



Для этого придется добавить всего один "лишний" тэг и один класс.

HTML
<label for="windows" class="for-radio">
	<input type="radio" name="os" value="windows" id="windows" checked="checked" />
	<span>Windows</span>
</label>
<label for="linux" class="for-radio">
	<input type="radio" name="os" value="linux" id="linux"/>
	<span>Linux</span>
</label>
<label for="macosx" class="for-radio">
	<input type="radio" name="os" value="macosx" id="macosx"/>
	<span>Mac OS X</span>
</label>	







/* Скрываем системный контрол */
input[type="radio"] {
	display: none;
}

label.for-radio span {
	background: url('radio.png') no-repeat;
	padding-left: 26px;		/* Ширина картинки + пара пикселей отступа от нее до текста */
	line-height: 24px;
	height: 24px;
	display: block;
}

/* Смещения для невыбранной и выбранной радиокнопки */

label.for-radio input[type="radio"] + span {
	background-position: top left;
}

label.for-radio input[type="radio"]:checked + span {
	background-position: bottom left;
}




Результат будет таким:

Tags:

Hubs: