Question 237106 in Html Question posted in
Some basic documentation can be found here.

Is there a way to wrap an HTML Element inside an Option Tag?

For example:

<select {...props}>
     <option value='my_option'>
        <div className='flex justify-between items-center'>
            <SomeIcon className='w-4'/>
            <p>My Option</p>
        </div>
    </option>
</select>

When I try the above, it just discards the icons and only show text with the default styling
enter image description here

Tags:

2

Answers


  1. 0

    There is no way to wrap a HTML element inside an <option> tag. As per the HTML specification for <option>:

    Content model:

    If the element has a label attribute and a value attribute: Nothing.
    If the element has a label attribute but no value attribute: Text.
    If the element has no label attribute and is not a child of a datalist element: Text that is not inter-element whitespace.
    If the element has no label attribute and is a child of a datalist element: Text.

    Thus, only text is permitted within <option> elements. Anything else is discarded.

    Login or Signup to reply.
  2. 0

    You could try using JS and CSS in order to use absolute positioning with CSS and JS to hide it the content when the menu is closed and show the content when the menu is open. However, this requires a medium understanding of CSS and JS.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search