-1

Css Content Property does not work for Select element on Safari. But it perfectly works for other browsers.

Check my fiddle across all browsers

Refer these Images between Chrome and Safari browsers.
enter image description here enter image description here

Note: It perfectly works for other elements except Select tag.

Manjuboyz
  • 6,978
  • 3
  • 21
  • 43
Lakshmi T S
  • 45
  • 1
  • 8
  • can you share the images between browsers to see the differences ? – Manjuboyz Mar 26 '20 at 12:37
  • While the link to a live demo is appreciated it does not replace the rule that questions must be self-contained, please: add your "*[mcve]*" code to the question itself. – David Thomas Mar 26 '20 at 12:49
  • 1
    Unfortunately I voted to close because of the lack of code in the question (as identified in my previous comment); however this question is also a duplicate of "[Pseudo elements and `select` tag](https://stackoverflow.com/q/21103542/82548)," if anyone would care to close the question (unless the OP edits in an explanation of how this question is sufficiently different to merit remaining open to new answers). – David Thomas Mar 26 '20 at 12:55
  • @Manjuboyz I have attached the image – Lakshmi T S Mar 26 '20 at 12:57

1 Answers1

0

This is an issue when you use optgroup for both firefox and safari unfortunately, there are very less options we can try for select so here is one of the alternative option you can use, in-case if this is not an issue.

This will remain same for all browsers.

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>
Manjuboyz
  • 6,978
  • 3
  • 21
  • 43