Bootstrap select dropdown list placeholder

Question

I am trying to make a dropdown list that contains a placeholder. It doesn't seem to support placeholder="stuff" as other forms do. Is there a different way to obtain a placeholder in my dropdown?

score 272 · Accepted Answer · edited May 23 '17 at 12:02

272

Yes just "selected disabled" in the option.

<select>
    <option value="" selected disabled>Please select</option>
    <option value="">A</option>
    <option value="">B</option>
    <option value="">C</option>
</select>

Link to fiddle

You can also view the answer at

https://stackoverflow.com/a/5859221/1225125

edited May 23 '17 at 12:02

Community

1
1

answered Apr 24 '14 at 20:34

Brakke

2,768
1
12
5

6

This doesn't answer the quesition as he/she is asking for a bootstrap built-in solution – Mehdi Apr 01 '16 at 02:08
5

Also You can use `disabled selected hidden` or only `hidden` all are correct. :) – MD Ashik Dec 01 '16 at 06:04

score 73 · Answer 2 · answered Nov 26 '15 at 17:12

73

Use hidden:

<select>
    <option hidden >Display but don't show in list</option>
    <option> text 1 </option>
    <option> text 2 </option>
    <option> text 3 </option>
</select>

answered Nov 26 '15 at 17:12

Jay Lin

872
6
7

continue with the last comment, when use v-model, needs to use this: – Homer Jan 31 '19 at 04:45

score 16 · Answer 3 · edited May 08 '18 at 17:08

dropdown or select doesn't have a placeholder because HTML doesn't support it but it's possible to create same effect so it looks the same as other inputs placeholder

    $('select').change(function() {
     if ($(this).children('option:first-child').is(':selected')) {
       $(this).addClass('placeholder');
     } else {
      $(this).removeClass('placeholder');
     }
    });

.placeholder{color: grey;}
select option:first-child{color: grey; display: none;}
select option{color: #555;} // bootstrap default color

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control placeholder">
   <option value="">Your Placeholder Text</option>
   <option value="1">Text 1</option>
   <option value="2">Text 2</option>
   <option value="3">Text 3</option>
</select>

if you want to see first option in list remove display property from css

You wrote a ton of custom code when adding "selected disabled" class is the same thing. — Jordan.J.D, Aug 29 '14 at 14:21
To his credit, his is a little more visually complete (with more code), where the placeholder is not rendered within the list selection. Though I'm going for the minimal code way of things. — Roadkillnz, Dec 24 '14 at 01:44

score 12 · Answer 4 · answered Aug 31 '18 at 14:56

12

Most of the options are problematic for multi-select. Place Title attribute, and make first option as data-hidden="true"

<select class="selectpicker" title="Some placeholder text...">
    <option data-hidden="true"></option>
    <option>First</option>
    <option>Second</option>
</select>

answered Aug 31 '18 at 14:56

VGranin

363
6
15

2

This is correct answer if you are using bootstrap-select JS plugin. By default in my dotnet core webapp it was not allowing me to select the first item. But after using this work around and for the select element instead of using 'placeholder' when I used 'title' as suggested, it worked perfect! Thanks. – sanpat Jan 25 '21 at 18:00

score 11 · Answer 5 · edited Jun 07 '18 at 09:01

11

If you are initializing the select field through javascript, the following can be added to replace the default placeholder text

noneSelectedText: 'Insert Placeholder text'

example: if you have:

<select class='picker'></select>

in your javascript, you initialize the selectpicker like this

$('.picker').selectpicker({noneSelectedText: 'Insert Placeholder text'});

edited Jun 07 '18 at 09:01

elhadi dp ıpɐɥןǝ

4,763
2
30
34

answered Mar 10 '18 at 18:07

Chadillac

309
5
18

I would think this is the best answer YTD. – xtlc Apr 12 '21 at 23:29

score 7 · Answer 6 · edited Oct 17 '17 at 18:15

7

Add hidden attribute:

<select>
    <option value="" selected disabled hidden>Please select</option>
    <option value="">A</option>
    <option value="">B</option>
    <option value="">C</option>
</select>

edited Oct 17 '17 at 18:15

lukess

964
1
14
19

answered Mar 15 '16 at 10:34

Mark van Lit

71
1
1

How this is different from [Jay Lin's answer](http://stackoverflow.com/a/33944019/2279200) and [Brakke's answer](http://stackoverflow.com/a/23279223/2279200) ? – Athafoud Mar 15 '16 at 10:43
1

This worked the best for me, because selected meaning it's selected by default, disabled so it can't be clicked, and hidden from the dropdown. I do suppose if hidden is used, disabled probably doesn't need to be in there. – aspergillusOryzae Oct 03 '18 at 23:38

score 5 · Answer 7 · edited May 08 '18 at 17:09

5

Try this:

<select class="form-control" required>
<option value="" selected hidden>Select...</option>

when using required + value="" then user can not select it using hidden will make it hidden from the options list, when the user open the options box

edited May 08 '18 at 17:09

Alexander Abakumov

13,617
16
88
129

answered Dec 13 '15 at 12:12

Bassem Shahin

656
7
13

highly recommended! – Aqua 4 Apr 16 '20 at 13:57
Does not gray the text. Adding `class="text-muted"` to the option does not help. Adding `disabled` prevents it from being auto-selected. – user9645 Jan 07 '21 at 15:07

score 2 · Answer 8 · answered Jan 29 '15 at 00:51

2

Try @title = "stuff". It worked for me.

answered Jan 29 '15 at 00:51

Gabriel Janson

37
1

4

An example would fit pefectly – workdreamer Jun 14 '15 at 21:31

score 2 · Answer 9 · answered Mar 11 '17 at 20:00

All this options are.... improvisations. Bootstrap already offers a solution for this. If you want to change the placeholder for all your dropdown elements you can change the value of

noneSelectedText in the bootstrap file.

To change individualy, you can use TITLE parameter.

example:

<div class="form-group">
          <label class="control-label col-xs-2" id="country">Continent:</label>
          <div class="col-xs-9">
            <select name="zones[]" class="selectpicker" title="All continents" id="zones" multiple >
              <option value="Africa">Africa</option>
              <option value="Asia">Asia</option>
              <option value="North America">America North</option>
              <option value="South America">America South</option>
              <option value="Antarctica">Antarctica</option>
              <option value="Australia">Australia</option>
              <option value="Europe">Europe</option>
            </select>
          </div>
        </div>

You sir just saved me. All the above options were not working for multiselect. As the select was not de-selecting previous values. Title worked for me — Faran Khan, Aug 29 '18 at 11:45

score 1 · Answer 10 · answered Mar 28 '16 at 06:37

Using Bootstrap, This is what you can do. Using class "text-hide", the disabled option will be shown at first but not on the list.

<select class="form-control" >
  <option selected disabled class="text-hide">Title</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

score 1 · Answer 11 · answered Mar 06 '17 at 16:38

1

Bootstrap select has an noneSelectedText option. You can set it via data-none-selected-text attribute. Documentation.

answered Mar 06 '17 at 16:38

Oleg

7,070
4
47
49

score 1 · Answer 12 · answered Oct 17 '17 at 16:19

in bootstrap-select.js Find title: null, and remove it.
add title="YOUR TEXT" in <select> element.
Fine :)

Example:

<select title="Please Choose one item">
    <option value="">A</option>
    <option value="">B</option>
    <option value="">C</option>
</select>

score 1 · Answer 13 · answered Feb 06 '18 at 10:11

I think, the Dropdown box with a class and JQuery code to disable the first option for user to select, will work perfectly as Select Box placeholder.

<select class="selectboxclass">
   <option value="">- Please Select -</option>
   <option value="IN">India</option>
   <option value="US">America</option>
</select>

Make the first option disabled by JQuery.

<script>
$('select.selectboxclass option:first').attr('disabled', true);
</script>

This will make the first option of Dropdown as Placeholder and user will no longer able to select the first option.

Hope It helps!!

TiEBTOs · Answer 14 · 2021-11-05T15:38:02.930

The right way to achieve what you are looking for is to use the title attribute. The title global attribute contains text representing advisory information related to the element it belongs to.

title="Choose..."

for example:

<select class="form-control selectpicker" name="example" title="Choose...">
    <option value="all">ABCDEFG</option>
    <option value="all">EFG</option>
</select>

check the documentation for more info about bootstrap-select

custom-button-text

score 0 · Answer 15 · answered Mar 09 '15 at 14:49

Here's another way to do it

<select name="GROUPINGS[xxxxxx]" style="width: 60%;" required>
    <option value="">Choose Platform</option>
<option value="iOS">iOS</option>
    <option value="Android">Android</option>
    <option value="Windows">Windows</option>
</select>

"Choose Platform" becomes the placeholder and the 'required' property ensures that the user has to select one of the options.

Very useful, when you don't want to user field names or Labels.

tk_ · Answer 16 · 2017-09-02T02:39:42.783

For .html page

<select>
    <option value="" selected disabled>Please select</option>
    <option value="">A</option>
    <option value="">B</option>
    <option value="">C</option>
</select>

for .jsp or any other servlet page.

<select>
    <option value="" selected="true" disabled="true">Please select</option>
    <option value="">A</option>
    <option value="">B</option>
    <option value="">C</option>
</select>

score 0 · Answer 17 · answered Jan 18 '19 at 15:23

Using bootstrap, if you need to also add some values to the option to use for filters or other stuff you can simply add the class "bs-title-option" to the option that you want as a placeholder:

<select class="form-group">
   <option class="bs-title-option" value="myVal">My PlaceHolder</option>
   <option>A</option>
   <option>B</option>
   <option>c</option>
</select>

Bootstrap adds this class to the title attribute.

edu · Answer 18 · 2019-04-18T13:23:36.250

Solution for Angular 2

Create a label on top of the select

<label class="hidden-label" for="IsActive"
    *ngIf="filterIsActive == undefined">Placeholder text</label>
<select class="form-control form-control-sm" type="text" name="filterIsActive"
    [(ngModel)]="filterIsActive" id="IsActive">
    <option value="true">true</option>
    <option value="false">false</option>
</select>

and apply CSS to place it on top

.hidden-label {
    position: absolute;
    margin-top: .34rem;
    margin-left: .56rem;
    font-style: italic;
    pointer-events: none;
}

pointer-events: none allows you to display the select when you click on the label, which is hidden when you select an option.

angular html css

score 0 · Answer 19 · answered Oct 12 '19 at 11:58

0

<option value="" defaultValue disabled> Something </option>

you can replace defaultValue with selected but that would give warning.

answered Oct 12 '19 at 11:58

Mayank Pathela

453
1
6
15

score 0 · Answer 20 · answered Sep 15 '20 at 00:43

This is for Bootstrap 4.0, you only need to enter selected on the first line, it acts as a placeholder. The values are not necessary, but if you want to add value 0-... that is up to you. Much simpler than you may think:

<select class="custom-select">
   <option selected>Open This</option>
   <option value="">1st Choice</option>
   <option value="">2nd Choice</option>
</select>

This is link will guide you for further information.

Bootstrap select dropdown list placeholder

20 Answers20

Solution for Angular 2

Linked