How to style individual (or all, each) options/items in Html.ListBoxFor?

Question

In HTML, when I have a <select> , I populate it with <option> . Each <option> can accept styles and classes .

With my current project, I'm using Razor Pages with an Html.ListBoxFor . I can use this syntax:

@Html.ListBoxFor(m => m.service,
 new MultiSelectList((List<SelectListItem>)ViewData["services"], "Value", "Text"),
 new { style = "display:block; width:600px; overflow-y:auto", id = "ServiceSelect", size = "3" })

and stylize my ListBox. However, I can't seem to find a way to stylize each individual option; for example, I would really like to add some padding, as the items are very small.

How do I stylize the options inside an Html.ListBox?

Answer 1

One of the best choice and the simplest one is using jQuery Nice Select library. It's simple to set up and easy to use.