Стилизация select CSS для отображения в разных браузерах

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

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

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

Были протестированы следующие сценарии стилизации 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 с применением свойств 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):

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):

Элемент 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):

Элемент 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):