меню

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

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

Базовые правила HTML верстки писем для E-Mail рассылки

Для того, чтобы email рассылка смотрелась максимально одинаково в большинстве почтовых клиентах, необходимо придерживаться некоторых базовыx правил HTML верстки email-писем.

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

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

Стилизация элементов checkbox и radio button на CSS3

Часто ли Вы создаете различные формы, опросы на своих сайтах? Если да, то наверняка Вам хотелось изменить стандартные элементы. В этой статье покажем, как можно легко и просто заменить стандартные элементы checkbox (флажки) и radio button (переключатели) на свои.

Формат ссылки для телефонных звонков

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

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

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

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

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

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

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

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