No project linked, as I’ve not begun yet. I have noticed there’s no simple way to style form select dropdown lists. I need a form that has several categories within it, so I’d like to bold some items, and if possible make those items non-selectable. See the attached screenshot for my figma mockup. I’d also like to be able to style the dropdown itself so I can match the mockup.
Any ideas how I’d achieve this?
In general form elements have styling challenges because different browsers render them completely differently.
If you want to use a select here, you’d need to test carefully on your target mobile devices.
But otherwise this shouldn’t be a big deal to build using custom elements;
<select name="lunch">
<optgroup label="Fruits">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange">Orange</option>
</optgroup>
<optgroup label="Vegetables">
<option value="carrot">Carrot</option>
<option value="lettuce">Lettuce</option>
<option value="broccoli">Broccoli</option>
</optgroup>
</select>
Browsers will show the optgroup label as your grouping, and you can add a bottom order to it for your separator. The rest is simple custom CSS.
To achieve a styled dropdown with bold, non-selectable category headings, use the built-in <optgroup> feature in form dropdowns. This allows you to group related options under bold labels that users cannot select. Most browsers automatically style these headings in bold. However, if you want further customization, such as changing colors or spacing, you may need to apply CSS styles. If standard styling options are too limited, consider using a custom dropdown solution with JavaScript libraries like Select2 or Choices.js, which offer greater flexibility in appearance and functionality.
These replies are great. I was able to combine them with this project to acheive my desired outcome.