меню

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

Возможно, вам будет интересно

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

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

Пять полезных CSS селекторов

Помимо обычных селекторов тегов, потомков, классов и id селекторов, CSS располагает псевдо-классами, селекторы которых позволяют оформить HTML теги на основе их позиции в документе. В этой статье рассмотрим 5 полезных CSS селекторов, стоящих внимания при оформлении веб-страниц и приложений.

Эффект пульсации элемента на чистом CSS

Задумались, как сделать пульсирующий элемент на чистом css/html. В данной статей, мы покажем саймый простой пример того, как реализоваться анимацию пульсацию, используя html и css.

10 редких тегов HTML, которые редко используют

Изучение некоторых из наименее известных и используемых тегов в HTML, полезных для конкретных случаев использования, несмотря на низкую популярность.

Оформление заявки

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

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

КП на создание сайта Коммерческое предложение на созданеи сайта

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

Скачать БРИФ (акета) на создание сайта Скачать БРИФ (акета) на создание сайта

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