1796824 - Icons in <option> of <select> are only visible after selection

Status: RESOLVED DUPLICATE of bug 1576820

(Core :: Layout: Text and Fonts, defect)

Description

[nawfal.elkhaznagi]

Attachment: FIREFOX BUG.png

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:105.0) Gecko/20100101 Firefox/105.0
Firefox for Android

Steps to reproduce:

put icons "fontawesome" in option tag of select.

<div class="select-box">

<select name="sample" id="sample" class="fa">
<option value="">----</option>
<option value="fa fa-address-card" class="fa"> address card</option>
<option value="fa fa-bell" class="fa"> bell</option>
<option value="fa fa-bookmark" class="fa"> bookmark</option>
<option value="fa fa-building" class="fa"> building</option>
</select>

</div>

https://codepen.io/mstanka/pen/mdPBdMa

Actual results:

the icons are only displayed when the option is selected.

Expected results:

the icons should be displayed as is wether they are selected or not.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::DOM: Selection' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Emilio Cobos Álvarez (:emilio)]

This doesn't work in any browser in macOS either, afaict.