发表新帖
发表新帖

How do I set an un-selectable default description in a select (drop-down) menu in HTML?

后端 未结
关注
7 1065
情话喂你
情话喂你 2020-12-08 02:16

I have a drop down where the user selects a language:
提交评论
  •  加载中...
  • 梦如初夏
    2020-12-08 02:55 

    .selectmenu{
  
	-webkit-appearance: none;  /*Removes default chrome and safari style*/
	-moz-appearance: none; /* Removes Default Firefox style*/
	background: #0088cc ;
	width: 200px; /*Width of select dropdown to give space for arrow image*/
	text-indent: 0.01px; /* Removes default arrow from firefox*/
	text-overflow: "";  /*Removes default arrow from firefox*/ /*My custom style for fonts*/
	color: #FFF;
	border-radius: 2px;
	padding: 5px;
    border:0 !important;
	box-shadow: inset 0 0 5px rgba(000,000,000, 0.5);
}
.hideoption { display:none; visibility:hidden; height:0; font-size:0; }
    Try this html

<select class="selectmenu">
<option selected disabled class="hideoption">Select language</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
</select>

    0 讨论(0)
  • 不知归路
    2020-12-08 03:07

    Just make option#1 Select Language:

    Live Demo

    0 讨论(0)
  • 感动是毒
    2020-12-08 03:08

    If none of the options in the select have a selected attribute, the first option will be the one selected.

    In order to select a default option that is not the first, add a selected attribute to that option:

    <option selected="selected">Select a language</option>

    You can read the HTML 4.01 spec regarding defaults in select element.

    I suggest reading a good HTML book if you need to learn HTML basics like this - I recommend Head First HTML.

    0 讨论(0)
  • 灰色年华
    2020-12-08 03:11

    Put your prompt in the 1st option and disable it:

    <selection>
    <option disabled selected>”Select a language”</option>
    <option>English</option>
    <option>Spanish</option>
</selection>

    The first option will automatically be the selected default (what you see first when you look at the drop-down) but adding the selected attribute is more clear and actually needed when the first field is a disabled field.

    The disabled attribute will make the option be un-selectable/grayed out.

    Other answers suggest setting disabled=“disabled” but that’s only necessary if you need to parse as XHTML, which is basically a more strict version of HTML. disabled on it’s on is enough for standard HTML.

    If you want to make the selection “required” (without accepting the “Select a language” option as an accepted answer):

    Add the required attribute to selection and set the first option’s value to the empty string ””.

    <selection required>
    <option disabled value=“”>Select a language</option>
    <option>English</option>
    <option>Spanish</option>
</selection>
    0 讨论(0)
  • 谎友^
    2020-12-08 03:13

    Although this question has an accepted answer but I think this is a much cleaner way to achieve the desired output

    <select required>
<option value="">Select</option>
<option>English</option>
<option>Spanish</option>
</select>

    The required attribute in makes it mandatory to select an option from the list.

    value="" inside the option tag combined with the required attribute in select tag makes selection of 'Select' option not permissible, thus achieving the required output

    0 讨论(0)
    • 1 2 下一页
     看不清?
    提交回复
    热议问题