значение элемента select (optgroup) не отображается в сафари - CSS

Question

Css Свойство содержимого не работает для элемента Select в Safari. Но он отлично работает для других браузеров.

Проверьте мою скрипку во всех браузерах

---

См. Эти изображения между Chrome и Safari браузерами .

---

Примечание. Он отлично работает для других элементов, кроме тега Select.

Answer 1

Это проблема, когда вы используете optgroup как для firefox, так и safari, к сожалению, есть очень мало вариантов, которые мы можем попробовать для select, поэтому вот один из альтернативных вариантов, которые вы можете использовать, в Если это не проблема.

Это будет одинаковым для всех браузеров.

span {
  display: inline-block;
  vertical-align: top;
}

select {
  height: 200px
}

span:before {
  content: attr(label);
}

.Header {
  font-weight: bold;
  color: black;
}

<select id="cars" multiple>
  <!-- you can use this as header -->
  <option class="Header" disabled>Swedish Cars</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <!-- you can use this as header -->
  <option class="Header" disabled>German Cars</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<span label='I am span content'></span>