меню

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

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

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

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

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

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

17 CSS/HTML эффектов с кроссбраузерными решениями

Когда вы хотите добиться какого-либо эффекта, то не беретесь каждый раз изобретать велосипед, всегда проще взять готовый кусок кода. И если у вас уже есть такой фрагмент кода, который реализует нужный вам функционал (и при этом вы понимаете, как он работает), то вы просто применяете его.

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

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

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

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

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

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

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

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

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