Нестандартный textarea: в поисках решения

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

К счастью, практически все стандартные элементы форм мы уже можем привести в соответствие с задумкой дизайнера. Это и текстовые поля (input type=text/password), и поля выбора файла (input type=file), и radio с checkbox, и даже select.

Единственный элемент, который все еще сопротивлялся стилизации — это textarea. А его иногда рисуют так, что только держись.

Как же такую красоту реализовать?

Первое, что приходит на ум — подменить background для самого textarea.

textarea{
	width: 247px;
	height: 107px;
	border: none;
	padding: 15px;
	background: url(../images/textarea.png) no-repeat;	
}

Плохая идея!

Вторая мысль — обернуть textarea в div и присваивать фон уже ему. Тогда мы сможем управлять положением прокрутки и может все получиться красиво?

	<div class=""forText"><textarea rows="" cols=""></textarea></div>

.forText{
	width: 247px;
	height: 107px;
	padding: 15px;
	background: url(../images/textarea.png) no-repeat;	
}

textarea{
	border: none;
	background: none;
	width: 247px;
	height: 107px;
}

Что ж, вроде как смотрится неплохо. С этим дизайном и в этом браузере. Но ведь может быть и такое:

Нужно как-то стилизовать прокрутку.

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

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

Но в конце концов, мне надоело, потупив глаза, отвечать очередному заказчику, что, дескать, извини, но прокрутка в textarea будет стандартной. Следствием явилось рождение плагина cuText.

Прекрасно осознавая сырость плагина, публикуемый cuText пометил версией 0.9. Если кому-то будет полезен, буду рад. Работу над плагином считаю продолжающейся. С удовольствием рассмотрю все замечания, пожелания и рацпредложения.

Материал:

• Beautiful Contact Forms for your Inspiration