maxidebox@list.ru | +7 (929) 701 21 71
Кроссбраузерная стилизация select на CSS

Кроссбраузерная стилизация select на CSS

В данной статье приведен пример стилизации select'а на чистом CSS для Chrome, Safari, Firefox и IE9+ без добавления дополнительных элементов.

CSS

	
select {
	width              : 100px;
	height             : 26px;
	border-radius      : 10px;
	-webkit-appearance : none;
	background-image   : url('select-arrow.png');
	background-position: right center;
	background-repeat  : no-repeat;
	line-height        : 1em;
	/* for FF */
	-moz-appearance    : none;
	text-indent        : 0.01px; 
	text-overflow      : '';
	/* for IE */
	-ms-appearance     : none;
	appearance         : none !important;
}
 
select::-ms-expand {
	display: none;
}
	

Здесь первая часть кода отвечает за базовую стилизацию элемента. Можно также добавить цвет фона background-color и цвет border'а.

	
	width        : 100px;
	height       : 26px;
	border-radius: 10px;
	

Далее отменяем стандартное отображение select'а

	
	/*for WebKit*/
	-webkit-appearance: none;
	/* for FF */
	-moz-appearance   : none;
	text-indent       : 0.01px; 
	text-overflow     : '';
	/* for IE */
	-ms-appearance    : none;
	appearance        : none !important;
	

Теперь задаем вид стрелочки, которая присутствует в каждом select'е:

	
	background-image   : url('select-arrow.png');
	background-position: right center;
	background-repeat  : no-repeat;
	

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

И осталось маленькое дополнение для IE:

	
select ::-ms-expand {
	display: none;
}
	

Голосов: 216 | Просмотров: 2326

Заявка на создание сайта

Документы на создание сайта

Изучите наше коммерческое предложение, заполните БРИФ и отправьте его на почту maxidebox@list.ru. Изучив все пожелания из БРИФ-а, обратным ответом оповестим Вас по стоимости разработке, ответим на вопросы.

КП на создание сайта Коммерческое предложение на созданеи сайта
Мы берем на себя ответственность за все стадии работы и полностью избавляем клиентов от забот и необходимости вникать в тонкости.

Скачать БРИФ (акета) на создание сайта Скачать БРИФ (акета) на создание сайта
Зополните у БРИФ-а все необходимые поля. Сделайте краткое описание к каждому из пунктов анкеты, привидите примеры в соответсвующий пунктах - это позволит лучше понять Ваши ожидания и требования к сайту

Закажите сайт по телефону: +7 (929) 701 21 71