Среда, 02 Апреля 2014 08:18

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

Written by 
Оцени эту запись
(425 Голоса)

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

 

 

Сразу покажу результат:

 

 

 

А теперь приведу CSS код  для этого:

 

select {
  width: 100px;
  height: 26px;
  border-radius: 10px;
  -webkit-appearance: none;
  background-image: url('/images/stories/select-arrow-pink.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('/images/stories/select-arrow-pink.png');
background-position: right center;
background-repeat: no-repeat;
 
 
Я специально задаю фон отдельными свойствами, чтобы можно было добавить фоновый цвет и не бояться, что он перекроет картинку.
 
И осталось маленькое дополнение для IE:
 
 
select::-ms-expand {
  display: none;
}
 
 
Результат в начале статьи! :-)
 
 

Additional Info

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов