How to make an HTML dropdown option not clickable

Question

<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.

remove it if you don't want to select that option – Janaka R Rajapaksha Jun 02 '14 at 03:28 — Janaka R Rajapaksha, Jun 02 '14 at 03:28

score 9 · Accepted Answer · edited May 23 '17 at 12:08

9

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:

enter image description here

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

edited May 23 '17 at 12:08

Community

1
1

answered Jun 02 '14 at 03:32

Wesley Murch

101,186
37
194
228

`` shows empty select, it's not a good idea for most users, it looks like broken form – vladkras Jun 02 '14 at 03:42
@vladkras What is the preferred way to show a dropdown without a default value? Without the empty option, "Running" would already be selected when the page loads. – Wesley Murch Jun 02 '14 at 03:43
I think the goal was simply to show user that very this dropdown is for selecting kind of athletics, not for categorizing, grouping, etc. Showing empty dropdown is opposite. – vladkras Jun 02 '14 at 03:48
The empty option is not essential to the answer, I just always use one because I believe it's best to have the user explicitly fill in a field rather than accidentally submit a default value. – Wesley Murch Jun 02 '14 at 03:51
@vladkras I think if the OP wants to add more groups or non-Athlectics options, then `optgroup` is the way, but if this will definitely be the only group then having "Athletics" as the `` for this field is better. – Wesley Murch Jun 02 '14 at 03:55
Thanks. It would be nice to show "Athletics" rather than blank, but since it's not a selectable option I wonder if that's possible with solely html. – Mark Biwojno Jun 02 '14 at 04:41

vladkras · Answer 2 · 2014-06-02T03:40:20.143

3

add disabled="disabled" attribute to this option

<option value="Athletics:" disabled="disabled">Athletics:</option>

in some browsers it will be still on the 1st place, but 2nd option will be selected already, so you have to use javascript to make this word visible or just put in the label:

<label>Athletics:<select> ...[all other options]... </select></label>

edited Jun 02 '14 at 03:40

answered Jun 02 '14 at 03:29

vladkras

16,483
4
45
55

score 1 · Answer 3 · answered Jun 02 '14 at 03:33

You could do this which would not allow users to select "Alhletics"

<form action="submit.php" method="post">
<select name="input"> 
<option value="Athletics:" disabled>Athletics:</option>
<option value="Running">Running</option>
<option value="Paragliding">Paragliding</option>
<option value="Swimming">Swimming</option>
</select> 
<input type="Submit" value="Next">
</form>

Or you could do this and add a label

<form action="submit.php" method="post">
<label for="input">Athletics</label>
<select name="input"> 
<option value="Running">Running</option>
<option value="Paragliding">Paragliding</option>
<option value="Swimming">Swimming</option>
</select> 
<input type="Submit" value="Next">
</form>

score 1 · Answer 4 · answered Jun 28 '16 at 06:25

Another solution work for me is:

<select name="input" onmousedown="function(){return false;}"> 
<option value="Athletics:">Athletics:</option>
<option value="Running">Running</option>
<option value="Paragliding">Paragliding</option>
<option value="Swimming">Swimming</option>
</select>

How to make an HTML dropdown option not clickable

4 Answers4