Определение элемента select с помощью CSS стилей для отображения в разных браузерах

В этой статье мы расскажем о поддержке в различных браузерах элемента SELECT CSS с примерами, фрагментами кода и скриншотами.

Для тестирования на Windows 8.1 использовались следующие браузеры:
Firefox 35;
Internet Explorer 11;
Google Chrome 40;
Windows Safari 5.1.

Список свойств CSS, которые поддерживаются браузерами:

CSS Firefox Chrome IE11
Background ДА ДА ДА
Border ДА ДА ДА
box-shadow ДА ДА ДА
Color ДА ДА ДА
Font ДА ДА ДА
Height ДА ДА ДА
margin ДА ДА ДА
opacity ДА ДА ДА
padding ДА ДА ДА
position ДА ДА ДА
width ДА ДА ДА

Были протестированы следующие сценарии стилизации SELECT CSS:

  • Элемент SELECT без применения CSS;
  • Элемент SELECT с применением свойств CSS padding и height или line-height;
  • Элемент SELECT с применением свойств CSS border, background и text-color;
  • Элемент SELECT с применением различных правил CSS.

Элемент SELECT без применения CSS

SELECT без применения CSS выглядит одинаково во всех перечисленных браузерах. За исключением того, что Internet Explorer для SELECT CSS оформления по умолчанию использует черную рамку, и стили стрелки выпадающего списка определяются по-разному.

Код:

// HTML 
<select class="select-type1"> 
  <option value="">Select an option</option> 
  <option value="Option 1">Option 1</option> 
  <option value="Option 2">Option 2</option> 
  <option value="Option 3">Option 3</option> 
  <option value="Option 4">Option 4</option> 
</select>

Скриншот (из Firefox):

select-element-no-css

Элемент SELECT с применением свойств CSS padding и height или line-height

Последние версии перечисленных браузеров поддерживают свойства CSS padding и height/line-height:

  • Firefox;
  • Chrome;
  • Internet Explorer 9+;
  • Internet Explorer 8: частично – поддерживает только padding;
  • Safari: частично – поддерживает только height/line-height.

Несколько замечаний относительно поддержки SELECT style CSS старыми версиями Internet Explorer:

  • IE 7 и ниже не поддерживает свойство CSS padding;
  • IE версии 7 и 8 поддерживают свойства height и line-height, но в них текст элемента SELECT отображается чуть выше нижней рамки выпадающего списка.

Только padding

Применяемые стили CSS:

  • Padding (отступы) для всех четырех направлений — 7 px.
// HTML 
<select class="select-type2"> 
  <option value="">Select an option</option> 
  <option value="Option 1">Option 1</option> 
  <option value="Option 2">Option 2</option> 
  <option value="Option 3">Option 3</option> 
  <option value="Option 4">Option 4</option> 
</select>

// CSS 
.select-type2 { 
  padding: 7px; 
}

Скриншот (из Firefox):

element-padding-only

Padding, height и line-height

Применяемые свойства для SELECT OPTION стилизации:

  • Height: 35 px;
  • Line-height: 35 px;
  • Padding, слева и справа: 7 px.

Код:

// HTML 
<select class="select-type3"> 
  <option value="">Select an option</option> 
  <option value="Option 1">Option 1</option> 
  <option value="Option 2">Option 2</option> 
  <option value="Option 3">Option 3</option> 
  <option value="Option 4">Option 4</option> 
</select>

// CSS 
.select-type3 { 
  height: 35px; 
  line-height: 35px; 
  padding: 0 7px; 
}

Скриншот (из Firefox):

padding-height-line-height

Элемент SELECT с применением свойств border, background и text-color

Все современные браузеры поддерживают эти свойства стилизации SELECT CSS.

Применяемые стили CSS:

  • Background color: бледно-розовый;
  • Border: 1 пиксель, красная;
  • Color (цвет текста): синий.

Код:

// HTML 
<select class="select-type4"> 
  <option value="">Select an option</option> 
  <option value="Option 1">Option 1</option> 
  <option value="Option 2">Option 2</option> 
  <option value="Option 3">Option 3</option> 
  <option value="Option 4">Option 4</option> 
</select>

// CSS 
.select-type4 { 
  background-color: #ffdddd; 
  border: 1px solid red; 
  color: blue; 
}

Скриншот (из Firefox):

text-bg-border-colors

Элемент SELECT с применением различных свойств CSS

В приведенном ниже примере показано применение к SELECT style CSS свойств.

Примененные стили CSS:

  • Фон: вертикальный градиент, сверху (от светло-зеленого) вниз (к светло-пурпурному);
  • Рамка: 2 пикселя, серая;
  • Округление углов рамки (border radius): 3 пикселя;
  • Тень: светло-серая;
  • Цвет текста: темно-серый;
  • Размер шрифта: 15 пикселей;
  • Поля: 10 пикселей;
  • Ширина поля: 200 пикселей.

Поддержка этих свойств CSS различными браузерами существенно отличается:

  • Firefox, Chrome, IE11 и IE10 отображают их одинаково — отличается только вид стрелки;
  • IE9 и предыдущие версии не поддерживают градиент фона;
  • IE8 и предыдущие версии не поддерживают для SELECT CSS тени и закругленные углы рамки;
  • IE7 и предыдущие версии не поддерживают поля;
  • Safari не поддерживает поля и тень.
// HTML 
<select class="select-type5"> 
  <option value="">Select an option</option> 
  <option value="Option 1">Option 1</option> 
  <option value="Option 2">Option 2</option> 
  <option value="Option 3">Option 3</option> 
  <option value="Option 4">Option 4</option> 
</select>

// CSS 
.select-type5 { 
  background: -moz-linear-gradient(top, #c8ffc4, #afb8ff); 
  background: -ms-linear-gradient(top, #c8ffc4, #afb8ff); 
  background: -webkit-linear-gradient(top, #c8ffc4, #afb8ff); 
  background: linear-gradient(top, #c8ffc4, #afb8ff); 
  border: 2px solid #999; 
  border-radius: 3px; 
  box-shadow: 0 0 5px #999; 
  color: #111; 
  font-size: 15px; 
  padding: 10px; 
  width: 200px; 
}

Скриншот (из Firefox):

select-element-funky

Перевод статьи «Cross-browser SELECT element styling with CSS» был подготовлен дружной командой проекта Сайтостроение от А до Я.