меню

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

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

Что такое Pixel Perfect верстка?

Pixel Perfect верстка — это особая техника создания структуры html-кода, которая позволяет сверстанному html-шаблону максимально точно совпадать с оригинальным PSD-макетом пиксель в пиксель.

Адаптивная верстка. Правильные медиа выражения для retina.

Мне приходилось встречать довольно много разные способы определения мониторов retina. Одни являются объемными, другие наоборот. Давайте рассмотрим, какие из media quires изпользовать для ретинизации.

Стилизуем placeholder при помощи CSS

Атрибут placeholder применяется для призыва к действию внутри пустых элементов input и textarea. В этой статье мы рассмотрим возможности стилизации текста placeholder-a, а также некоторые трюки, которые позволят сделать его более удобным и функциональным.

Скошенные элементы на CSS3

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

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

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

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

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

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

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

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