Is it possible to have multi-line in select option value

Question

Is it possible to have multi-line in select option value

In the multi line option I would like show first line in bold and rest of lines in regular font.

---

---

Is there any possible approach using HTML/CSS and Java script or Do we have any library in React which can achieve the above

Answer 1

It is not possible with current support of the select tag in current HTML version. The only possible solution here is to use a custom made solution, both vanilla CSS or javascript options are available, and you have plenty of techniques to choose from.

Whenever I found myself in a need of creating a custom solution I like to look for inspiration in this article: https://tympanus.net/Development/SelectInspiration/index.html

Once you decide to go with custom made solution it is always a good practise to implement at least basic Screen Reader support. A good place to start: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role#Best_practices

From my experience in business projects I usually prefer to go with JS powered solution, especially in such where frontend is changing a lot. My favourite here: https://select2.org/ which is both easy to customize and powerful enough to meet even the most challenging requirements, and you can't forget about really good docs.

As I can see you included a reactjs tag in your question, so if you are planning to create a react solution I would go with: http://jedwatson.github.io/react-select/

which is pretty similar in functionality to Select2