меню

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

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

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

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

Про новые CSS псевдоклассы - :is() :where() :has()

В мире веб-разработки постоянно появляются новые инструменты и возможности для создания более эффективных и удобных интерфейсов. Одним из последних дополнений к CSS стали селекторы :is(), :where() и :has(), которые предлагают новые способы выбора элементов на веб-странице. Давайте рассмотрим каждый из них подробнее и узнаем, как они могут быть полезны в веб-разработке.

Красивая форма обратной связи на чистом CSS

В данной статье мы расскажем Вам, как разработать красивую контактную форму на чистом CSS без использования изображений. Форма будет иметь поля со следующими данными: имя, адрес электронной почты, URL-адрес, тема и текст сообщения.

Адаптивный CSS3 Manasory без JavaScript

Реализация адаптивных html-блоков с содержанием в виде кирпичной кладки Masonry, исключительно средствами CSS3 без JavaScript.

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

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

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

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

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

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

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