Lack of CSS Styling Capabilities for <option> Tags

[sardarshoaib791]

What is the issue with the HTML Standard?

Currently, there are several CSS styling properties that cannot be applied to <option> tags within <select> elements. Specifically, the following properties are not effective:

• line-wrap
• overflow (over text hidden)
• text-overflow (text wrap or break line)
• line-break
• word-wrap

This limitation presents challenges when dealing with long text content inside <option> tags, as there is no way to break the line or manage the overflow of the text. This results in a poor user experience, especially in scenarios where the content of the options is extensive and needs to be fully visible or formatted for better readability.

Example Scenario:

<select>
    <option>This is a very long text that cannot be broken into multiple lines or managed properly with current CSS properties.</option>
</select>

Expected Behavior:
We should be able to apply CSS properties such as line-wrap, overflow, text-overflow, line-break, and word-wrap to <option> tags to control the presentation of long text. This would allow for:

• Breaking long lines of text into multiple lines within an <option> tag.
• Managing text overflow with ellipses or other styles.
• Ensuring that long text content is fully visible or properly formatted.

Proposed Solution:
Enhance the <option> tag to support these CSS properties, enabling developers to apply styles that manage long text content effectively. This improvement would significantly enhance the usability and accessibility of forms and dropdowns containing extensive option content.

---

Feel free to modify or expand on this description based on your specific needs or observations.

[scottaohara]

this is essentially a very specific duplicate of the larger issue here - #9799

there have been ongoing discussions about this and the larger work of modifying select and its children so that they can be styleable in various open ui issues

i'd suggest taking a look through the existing issues and participate in the discussions! your thoughts would be welcome :)