Изменить стиль Select с помощью jQuery

Author Автор: Роман Чернышов    Опубликовано: 21 марта 2012

В последнее время дизайнеры стали все чаще рисовать HTML формы в стилистике HTML 2.0, эта тенденция длится уже несколько лет и чем дальше тем более привычным становятся красивые поля ввода данных и select’ы с закругленными краями и тенями. Можно только порадоваться, ведь все замечательно и CSS3 уже используется где только можно, позволяя придавать красивый вид формам, полям и селектам. Увы не всегда все так радужно…

Не смотря на то, что все современные браузеры поддерживают HTML5 и CSS3, ими пользуются далеко не все, и как гласит статистика половина пользователей всего интернета по прежнему работают в браузерах старых версий, многие из которых не поддерживают в полной мере или вообще CSS3. По этому стилизовать выпадающий список (Select), часто приходится старыми добрыми средствами, а именно jQuery (js) и картинками PNG или GIF. Об одном из таких способов я хочу рассказать.

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

Код jQuery

(function($){
 $.fn.extend({
 
 	customStyle1 : function(options) {
	  if(!$.browser.msie || ($.browser.msie&&$.browser.version>6)){
	  return this.each(function() {
 
			var currentSelected = $(this).find(':selected');
			$(this).after('<span class="select1"><span class="customStyleSelectBoxInner">'+currentSelected.text()+'</span></span>').css({position:'absolute', opacity:0,fontSize:$(this).next().css('font-size')});
			var selectBoxSpan = $(this).next();
			var selectBoxWidth = parseInt($(this).width()) - parseInt(selectBoxSpan.css('padding-left')) -parseInt(selectBoxSpan.css('padding-right'));
			var selectBoxSpanInner = selectBoxSpan.find(':first-child');
			selectBoxSpan.css({display:'inline-block'});
			selectBoxSpanInner.css({width:selectBoxWidth, display:'inline-block'});
			var selectBoxHeight = parseInt(selectBoxSpan.height()) + parseInt(selectBoxSpan.css('padding-top')) + parseInt(selectBoxSpan.css('padding-bottom'));
			$(this).height(selectBoxHeight).change(function(){
				selectBoxSpanInner.text($('option:selected',this).text()).parent().addClass('changed');
			});
 
	  });
	  }
	}
 });
})(jQuery);

Вызов скрипта для стилизации «селекста».

$(document).ready(function() {
	$('.select1').customStyle1();
  });

HTML код «селекта» который будет стилизован

<select name="name" class="select1">
	<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>

Стиль который будет применен к селекту

.select1  {
	width:410px;
	height:32px;
	color:#909090;
	font:12px Arial, Tahoma, Helvetica, Verdana;
	text-align:left;
	background:url(images/sel1.png) no-repeat; /*изображение для оформления селекта*/
	line-height:30px;
	white-space:nowrap; /* запрещаем перенос */
	padding:0 22px 0 12px; /* отступ справа с учетом стрелочки */
	border:0;
	zoom:1; /* для IE6 */
	margin:3px 0 5px 0;
}

Заменив фоновое изображение вы можете стилизовать select как вам угодно и работать данный пример будет в большинстве браузеров, даже в самых старых).

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

3 комментария to “Изменить стиль Select с помощью jQuery”

  • user 10.04.2012 в 10:40 пп

    Спасибо большое
    долго искал
    самое простое решение данной проблемы и нашел именно на вашем сайте
    не зря 2+ часа просидел
    спасибо!

  • User2 15.04.2012 в 1:39 пп

    Спасибо, долго искал. Даже думал скин рисовать к другим select’ам)

  • Виталий 26.05.2013 в 6:55 пп

    Спасибо большое. Пригодилось ваше решение. Помогло победить select в опере, она напрочь отказывалась поддаваться!

Оставить комментарий на Виталий

Автор блога
Роман Чернышов
Веб-разработчик,
Full Stack
Senior, Architect
PHP, JavaScript, Node.JS, Python, HTML 5, CSS 3, MySQL, Bash, Linux Admin
Заказать работу
предложить оффер

Моя книга
Книга. Веб-разработчик. Легкий вход в профессию
Печатная книга
Веб-разработчик.
Легкий вход в профессию
Оформить предзаказ
Последние вопросы
Список вопросов
Последние комментарии
Меню

Archive

Мои проекты
Insurance CMS Love Crm CMS Совместные покупки Мой PHP Framework Хостинг для моих клиентов Лицензии на мой софт и поддержка