CSS приклад: Псевдоэлемент ::-ms-expand

Псевдоелемент ::-ms-expand в CSS

Псевдоелемент ::-ms-expand задає стиль кнопки розгортання списку, створеного за допомогою тега <select> в браузері Internet Explorer.

Синтаксис

селектор::-ms-expand { ... }

Значення

Немає.

Приклад

HTML5CSS3IE 10ChromeOperaSafariFirefox

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>::-ms-expand</title>
  <style>
   .expand {
    border: none; /* Усуваємо рамку */
   }
   .expand::-ms-expand {
    border-radius: 10px; /* Радіус закруглення */
    background: #7cbc0a; /* Колір фону */
    color: #fff; /* Колір тексту */
   }
  </style>
 </head>
 <body>
  <select>
   <option>Куздра</option>
   <option>Бокр</option>
   <option>Бокрёнок</option>
  </select>
  <select class="expand">
   <option>Куздра</option>
   <option>Бокр</option>
   <option>Бокрёнок</option>
  </select>
 </body>
</html>

Результат цього прикладу показано на рис. 1. Зліва знаходиться стандартний розгортаний список, справа — список, змінений за допомогою стилів.

Рис. 1. Вид списка, оформленого за допомогою стилів

Часті запитання

  • Q: Як використовувати псевдоелемент ::-ms-expand в CSS?

    A: Псевдоелемент ::-ms-expand використовується для стилізації елементів форми в Internet Explorer.

  • Q: Де використовують псевдоелемент ::-ms-expand в CSS?

    A: Псевдоелемент ::-ms-expand зазвичай використовується для стилізації випадаючих списків (select) в Internet Explorer.

  • Q: Як виглядає синтаксис використання псевдоелемента ::-ms-expand в CSS?

    A: ::-ms-expand { стилізація елементів; }

  • Q: Чи підтримується псевдоелемент ::-ms-expand в інших браузерах, окрім Internet Explorer?

    A: Ні, псевдоелемент ::-ms-expand є пропрієтарним для Internet Explorer і не підтримується в інших браузерах.

  • Q: Чи є альтернативи для використання псевдоелемента ::-ms-expand в CSS?

    A: Так, для стилізації випадаючих списків в інших браузерах краще використовувати стандартні CSS властивості, такі як ::after або ::before.