placeholder for select tag

Question

Is it possible to have a placeholder on a select tag    lt select placeholder  select your beverage  gt       lt option gt Tea lt  option gt       lt option gt coffee lt  option gt       lt option gt soda lt  option gt    lt  select gt    or may be a possible work around

User · Answer

No need to take any javscript or any method you can just do it with your html css

HTML

<select id="myAwesomeSelect">
    <option selected="selected" class="s">Country Name</option>
    <option value="1">Option #1</option>
    <option value="2">Option #2</option>

</select>

Css

.s
{
    color:white;
        font-size:0px;
    display:none;
}

User · Answer

EDIT  This did does work at the time I wrote it  but as Blexen pointed out  it s not in the spec    Add an option like so     lt option default gt Select Your Beverage lt  option gt    The correct way    lt option selected  selected  gt Select Your Beverage lt  option gt

User · Answer

There is a Select2 plugin allowing to set a lot of cool stuff along with placeholder  It is a jQuery replacement for select boxes  Here is an official site https   select2 github io examples html  The thing is - if you want to disable fancy search option  please use the following option set   data-plugin-options           placeholder    Select status        allowClear   true        minimumResultsForSearch   -1     Especially I like the allowClear option   Thank you

User · Answer

This my function for select box placeholder   HTML   lt select name  country  id  country  gt     lt option value    disabled selected gt Country lt  option gt     lt option value  c1  gt England lt  option gt     lt option value  c2  gt Russia lt  option gt     lt option value  c3  gt USA lt  option gt   lt  select gt    jQuery       jQuery function              function for placeholder select         function selectPlaceholder selectID           var selected     selectID     option selected            var val   selected val              selectID     option    css  color     333            selected css  color     999            if  val                      selectID  css  color     999                         selectID  change function              var val     selectID     option selected    val              if  val                        selectID  css  color     999               else                selectID  css  color     333                                             selectPlaceholder   country

User · Answer

lt select gt      lt option disabled selected gt select your beverage lt  option gt      lt option  gt Tea lt  option gt      lt option gt coffee lt  option gt      lt option gt soda lt  option gt   lt  select gt

User · Answer

Yes it is possible     You can do this using only HTML You need to set default select   option disabled    and selected    and select tag required       Browser doesn t allow user to submit the form without selecting an   option     lt form action    method  POST  gt       lt select name  in-op  required    gt           lt option disabled    selected    gt Select Option lt  option gt           lt option gt Option 1 lt  option gt           lt option gt Option 2 lt  option gt           lt option gt Option 3 lt  option gt       lt  select gt       lt input type  submit  value  Submit  gt   lt  form gt

User · Answer

lt select gt            lt option value  quot  quot  disabled selected hidden gt  placeholder lt  option gt            lt option value  quot op1 quot  gt op1 lt  option gt            lt option value  quot op2 quot  gt op2 lt  option gt            lt option value  quot op3 quot  gt op3 lt  option gt            lt option value  quot op4 quot  gt op4 lt  option gt        lt  select gt

User · Answer

Try this   HTML   lt select class  form-control name  country  gt   lt option class  servce pro disabled  gt Select Country lt  option gt   lt option class  servce pro disabled  value  Aruba  id  cl country option  gt Aruba lt  option gt   lt  select gt    CSS   form-control option first-child       display  none

User · Answer

According to Mozilla Dev Network  placeholder is not a valid attribute on a  lt select gt  input   Instead  add an option with an empty value and the selected attribute  as shown below  The empty value attribute is mandatory to prevent the default behaviour which is to use the contents of the  lt option gt  as the  lt option gt  s value    lt select gt       lt option value    selected gt select your beverage lt  option gt       lt option value  tea  gt Tea lt  option gt       lt option value  coffee  gt Coffee lt  option gt       lt option value  soda  gt Soda lt  option gt   lt  select gt    In modern browsers  adding the required attribute to the  lt select gt  element will not allow the user to submit the form which the element is part of if the selected option has an empty value   If you want to style the default option inside the list  which appears when clicking the element   there s a limited number of CSS properties that are well-supported  color and background-color are the 2 safest bets  other CSS properties are likely to be ignored   In my option the best way  in HTML5  to mark the default option is using the custom data-  attributes 1 Here s how to style the default option to be greyed out    x000D   x000D  select option data-default    x000D    color   888  x000D    x000D   lt select gt  x000D     lt option value    selected data-default gt select your beverage lt  option gt  x000D     lt option value  tea  gt Tea lt  option gt  x000D     lt option value  coffee  gt Coffee lt  option gt  x000D     lt option value  soda  gt Soda lt  option gt  x000D   lt  select gt  x000D   x000D   x000D    However  this will only style the item inside the drop-down list  not the value displayed on the input  If you want to style that with CSS  target your  lt select gt  element directly  In that case  you can only change the style of the currently selected element at any time 2  If you wanted to make it slightly harder for the user to select the default item  you could set the display  none  CSS rule on the  lt option gt   but remember that this will not prevent users from selecting it  using e g  arrow keys typing   this just makes it harder for them to do so     1 This answer previously advised the use of a default attribute which is non-standard and has no meaning on its own  2 It s technically possible to style the select itself based on the selected value using JavaScript  but that s outside the scope of this question  This answer  however  covers this method

User · Answer

lt select gt        lt option selected  selected  class  Country  gt Country Name lt  option gt        lt option value  1  gt India lt  option gt        lt option value  2  gt us lt  option gt    lt  select gt            country         display none      lt  style gt

[html] placeholder for select tag

Examples related to html

Examples related to css