В данной статье приведен пример стилизации 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;
}
	

• 2.67
• 1
• 2
• 3
• 4
• 5