How to make an HTML dropdown option not clickable
html
Solution
If you plan on adding more options to this dropdown that aren't "Athlectics", I think what you may be looking for here is actually `<optgroup>`:
<select>
<option value=""></option>
<optgroup label="Athlectics">
<option value="Running">Running</option>
<option value="Paragliding">Paragliding</option>
<option value="Swimming">Swimming</option>
</optgroup>
</select>
It looks like this:
This is useful for categorizing groups of options in a dropdown. "Athlectics" will not be a selectable option.
Otherwise I think you should just use "Athlectics" as the label for this field and remove it from the options:
<label>Athlectics: <select>...</select></label>
You should always use a label anyways for accessibility purposes, and it generally improves your UI.
If you really just want to disable an option, use the `disabled` attribute:
<option value="Athletics:" disabled>Athletics:</option>
Reference:
- `<optgroup>`: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup
- `<label>`: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label
- `disabled` attribute: http://www.w3.org/TR/html5/disabled-elements.html Also: Correct value for disabled attribute
Problem
``` <form action="submit.php" method="post"> <select name="input"> <option value="Athletics:">Athletics:</option> <option value="Running">Running</option> <option value="Paragliding">Paragliding</option> <option value="Swimming">Swimming</option> </select> <input type="Submit" value="Next"> </form> ``` I'm trying to make "Athletics:" NOT click-able, so users have to choose their specific sport. Help appreciated, thanks.