How to make some options non-selectable?

[binarykitchen]

Hello everyone

It is possible to flag some options as non-selectable?

Similar to disabled but don't want to grey them out. This for decoration purposes, to add more information for the user. Very similar to the titles of grouped options but not grouped.

If you know how to, please share. Thanks for any tips 🙇

[ArianMakiabadi]

Yes, it’s possible, but it depends a bit on what UI / library you’re using. In plain HTML, there’s no official way to make an option non-selectable without using disabled, and disabled will always apply the greyed-out style.

That said, here are the usual approaches you can take.

1. Native HTML <select>

HTML only supports:

• selectable options
• disabled options (which are greyed out)

So if you do this:

<option disabled>Extra information</option>

it will always be greyed out by the browser. There’s no standard attribute for “non-selectable but normal-looking”.

2. Fake it with JavaScript (still native select)
   You can keep the option enabled visually, but block selection:

<select id="mySelect">
  <option value="">Extra information (not selectable)</option>
  <option value="a">Option A</option>
  <option value="b">Option B</option>
</select>

<script>
  const select = document.getElementById("mySelect");

  select.addEventListener("change", (e) => {
    if (e.target.value === "") {
      e.target.selectedIndex = -1; // or reset to previous value
    }
  });
</script>