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

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

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

Я данной статье я хочу рассказать о стилизации 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

Комментарии  

 
0 #35 Юлия 05.10.2017 06:20
И еще нужно фон белый задать, а то в мобильном хроме он серый.
Цитировать
 
 
+1 #34 Юлия 29.09.2017 10:26
Неплохо, только еще нужно border задать, а то он в разных браузерах по-разному выглядит.
Цитировать
 
 
0 #33 Jamal 20.06.2017 11:43
I love your blog.. very nice colors & themе. Did you design this website youгself
orr did you hre someone to ddо it for yοu? Plzz reply as I'm
looking to crеate my own blog and would like to know where ս got tһis
from. kudos
Цитировать
 
 
0 #32 Kate 05.06.2017 19:36
Цитирую дмитрий:
в сафари и в хромиум ubuntu выглфдит по разному твой пример


Можливо, не можу перевiрити, Можете надати скрiни або детальнiше пояснити рiзницю?
Цитировать
 
 
0 #31 дмитрий 04.06.2017 07:44
в сафари и в хромиум ubuntu выглфдит по разному твой пример
Цитировать
 
 
0 #30 Revelation Online 09.05.2017 14:34
Hello tο all, the contentѕ existing at this web site are ǥenuinely amazinjg foor people knoաledge, well,
keеp սup the good work feⅼlows.
Цитировать
 
 
0 #29 257 09.05.2017 06:13
Thiѕ wᥱbsite was... how ddo you say it? Relevant!!
Finally I've found something that helped me.
Thanks!
Цитировать
 
 
0 #28 ainur 15.04.2017 13:46
Про кастомизацию селекта тут
http://phpjs.ru/2017/02/28/customize-select/
Цитировать
 
 
0 #27 massage lyon france 13.04.2017 09:10
massage lyon france: http://www.sophiechassat.com
Цитировать
 
 
0 #26 Полина 01.04.2017 13:40
Обожемой, это великолепно! Автор, спасибо огромное! :roll:
Цитировать
 

Добавить комментарий


Защитный код
Обновить

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