how to set a default prompt when nothing selected for "select" using css

Question

Is it possible to set a default prompt when nothing is selected for select box using css? or is there an elegant way to deal with this other than

 <option>Select Here</option>?

Does this answer your question? [How do I make a placeholder for a 'select' box?](https://stackoverflow.com/questions/5805059/how-do-i-make-a-placeholder-for-a-select-box) — JohnK, Jun 23 '20 at 18:58

score 24 · Accepted Answer · edited Oct 02 '15 at 22:12

24

Try this:

<select>
    <option value="" disabled>Select one--</option>
    <option value="someVal1">Option 1</option>
    <option value="someVal2">Option 2</option>
    <option value="someVal3">Option 3</option>
    <option value="someVal4">Option 4</option>
</select>

edited Oct 02 '15 at 22:12

user1429980

6,872
2
43
53

answered Apr 13 '13 at 05:26

Zachary Kniebel

4,686
3
29
53

Note: I deleted my previous answer as @Quentin pointed out that I was mistaken about `` and I found other sources to refute my statement that it is not an element. However, I did find out that the inconsistent support across browsers (as alluded to by @Quentin) and the fact that they can only exist within ` – Zachary Kniebel Apr 13 '13 at 05:29
not bad at all... although i was hoping some kind of placeholder similar to input text.. but still helpful. thanks – Norks Apr 13 '13 at 05:32
No worries - sorry about the confusion :) – Zachary Kniebel Apr 13 '13 at 05:34
1

"the fact that they can only exist within ` – Paul D. Waite Jul 08 '13 at 12:09
5

also, you can add `selected="selected"` to have it be the default value as well. If the value gets changed, it won't be able to change back – cadlac Mar 30 '14 at 21:51
1

``disabled`` [does not allow for validation to occur](http://stackoverflow.com/questions/30532482/html5-form-validation-with-required-and-disabled-element), and keeps the ``select`` *valid*. This answer is partially incorrect. Edited answer. – user1429980 Oct 02 '15 at 22:11
2

this is useless, the initial prompt is not selected on load – SuperUberDuper Jul 08 '16 at 10:49
1

@SuperUberDuper the OP specifically asked for how to set a default prompt when nothing is selected on load. This solution leverages default browser functionality that displays the text of the first option when none have been selected. Since it is a default value, I inferred that the value should not be selected by default. If you want it selected then combine it with the comment by cadlac and enjoy. To simply call the solution "useless" is incorrect, crass and frankly a bit rude. – Zachary Kniebel Jul 09 '16 at 17:18
Ah yes, sorry I didn't see cadlacs answer. +1 – SuperUberDuper Jul 10 '16 at 12:53

Mauricio Gracia Gutierrez · Answer 2 · 2023-01-23T15:40:00.073

8

The accepted answer did not work for me as expected.

If you need the "Select one option" to be the selected one by default , this worked for me

<select id="selected_option" name="selected_option">
     <option value="default" selected="selected">Select one option </option>
     <option value="someVal1">Option 1</option>
     <option value="someVal2">Option 2</option>
     <option value="someVal3">Option 3</option>
     <option value="someVal4">Option 4</option>
</select>

Is also important that the select has id and name so when you submit the form the value will be part of the POST or GET

edited Jan 23 '23 at 15:40

answered Oct 10 '14 at 13:18

Mauricio Gracia Gutierrez

10,288
6
68
99

4

It doesn't need id, name is enough. – Marek Lisý Oct 04 '15 at 12:03
2

id is required if one uses `Label Text` – koppor Aug 22 '16 at 04:23
1

This should be the accepted answer, it worked as it should for me – Amir El-Bashary Jul 21 '19 at 09:49
select is such a broken component – SuperUberDuper Nov 08 '20 at 17:27
how would you html5 validation force the select to have non default? – SuperUberDuper Nov 08 '20 at 17:29
@SuperUberDuper sorry I did not understand. What do you mean or trying to achieve ? – Mauricio Gracia Gutierrez Nov 09 '20 at 21:52

score 4 · Answer 3 · answered Sep 06 '17 at 16:05

4

                        <select>
                            <option style="display:none">Empty</option>
                            <option>button1</option>
                            <option>button2</option>
                        </select>

answered Sep 06 '17 at 16:05

S1lllver

191
7

This combined with disabled is perfect – Hypersapien Feb 20 '19 at 16:43
But we have nothing to do with it, if we want to choose prompt option back manually. – Boolean_Type Dec 20 '19 at 12:45

score 3 · Answer 4 · answered Jul 08 '13 at 12:06

3

Try using option with unset value

<select>    
    <option value>Select something</option>
    <option value="1">Foo</option>
    <option value="2">Bar</option>
</select>

answered Jul 08 '13 at 12:06

SpadgeAki

77
5

This doesn't work for me, as it doesn't display "Select something". The default selected option is an empty text one – Bogdan Mates Sep 08 '16 at 09:26
Simple solution to **@Bogdan's** problem is to set placeholder for select tag.`` – MrAlbino Jun 16 '23 at 11:01

score 3 · Answer 5 · answered Sep 25 '18 at 03:58

This is how I use for setup the default prompt but it will not set a default value. It use a HTML5 validation required. It may be a little bit shift from the question but I hope it could help as alternative.

<select id="car" name="car[brand]" required>
  <option disabled selected>Select Car Brand</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

how to set a default prompt when nothing selected for "select" using css

5 Answers5