Стилизация select

Понадобилось как-то стилизовать select-ы, ну вроде бы фигня задача, «что в ней может быть сложного?» — подумал я. А когда дошло до дела, то понял, что все не так-то просто. Есть куча jquery плагинов, хаков, но все они, во-первых, требовали подключения дополнительного файла, что, конечно, в наше время многомегабитного интернета — фигня, но тут всплывала вторая проблема, идеологическая — я не понимал как оно работает. Т.е. я знаю, что эти решения подменяют обычный select, div-ами, но как это происходит для меня на тот момент было загадкой. Пока гуглил интернеты наткнулся вот на такую интересность поведения селектов. Вкратце (хотя там и так кратко все описано), если прописать к селекту css-свойство opacity:0; то само окно селекта исчезает, но при этом если ткнуть на то место, где должен располагаться этот самый селект, список вариантов выпадает.

Поскольку, меня устраивал вид выпадающего списка, то родилось решение — устанавливаем полную прозрачность элемента, оборачиваем его в некоторый div, в тот же div добавляем область отображения, например тег «p», в который средствами jqury (ну нравится мне эта библиотека, и она почти на всех наших проекта подключена, этот не был исключением) выводим текст выбранного значения. Теперь можно так же легко и непринудженно стилизовать div родитель, который для пользователя будет выглядить областью select. Думаю, что идея понятна. Теперь немного когда.  Верстка для реализации предложенного подхода выглядит так:

<div class="select_main">
	<p class="selecttitle"></p>
	<select id="calc_region_1" name='calc_region'>
		<option value=''>Выберите регион</option>
		<option value='1'>Москва</option>
		<option value='2'>Любой регион России (кроме Москвы)</option>
		<option value='3'>Вся Россия</option>
		<option value='4'>Вся Россия (за исключением Москвы)</option>
		<option value='5'>Вся Украина</option>
		<option value='6'>Вся Украина и вся Россия</option>
	</select>
</div>

Стили вот такие (да, я пишу стили в одну строку, а не столбиком, мне так удобнее, если сильно не нравится, пишите в комментах)

select{
	width:430px; 
	height:39px; 
	position:reative; 
	border:none; 
	cursor:pointer; 
	opacity:0;
}
.select_main{
	width:430px; 
	height:40px; 
	margin:15px 0 0; 
	position:relative; 
	background: transparent url('img/bg_select.png') no-repeat;
}
.selecttitle{
	width:380px; 
	height:39px; 
	position:absolute; 
	left:0; 
	top:0; 
	padding: 0 30px 0 20px;
	color:#7f7f7f; 
	font-size:18px; 
	line-height:41px; 
	overflow:hidden;
}

И вот так выглядит написанный скрипт

// начальная инициализация отображаемого текста при загрузке страницы
$('select').each(function(){
	$(this).parent().children('.selecttitle').text( $(this).children('option:selected').text() );
});

// изменение текста при изменении select
$('select').change(function(){
	$(this).parent().children('.selecttitle').text( $(this).children('option:selected').text() );
});

Вот и все) Вот так при помощи буханки хлеба и напильника.. Но в моем случае я знаю зачем я это сделал. Думаю, что мое решение элегантнее и «легче» многих вариантов)