How would I go about setting a title in select tag? Here is my select box:
<select><option value="sydney">Sydney</option><option value="melbourne">Melbourne</option><option value="cromwell">Cromwell</option><option value="queenstown">Queenstown</option></select>When I visit the site, by default it shows "Sydney". But I want to display a title, such as, "What is the name of your city?"
Best Answer
<select><option selected disabled>Choose one</option><option value="sydney">Sydney</option><option value="melbourne">Melbourne</option><option value="cromwell">Cromwell</option><option value="queenstown">Queenstown</option></select>Using selected and disabled will make "Choose one" be the default selected value, but also make it impossible for the user to actually select the item, like so:
<select><optgroup label = "Choose One"><option value ="sydney">Sydney</option><option value ="melbourne">Melbourne</option><option value ="cromwell">Cromwell</option><option value ="queenstown">Queenstown</option></optgroup></select>You can combine it with selected and hidden
<select class="dropdown" style="width: 150px; height: 26px"><option selected hidden>What is your name?</option><option value="michel">Michel</option><option value="thiago">Thiago</option><option value="Jonson">Jonson</option></select>Your dropdown title will be selected and cannot chose by the user.
You can use the following
<select data-hai="whatup"><option label="Select your city">Select your city</option><option value="sydney">Sydney</option><option value="melbourne">Melbourne</option><option value="cromwell">Cromwell</option><option value="queenstown">Queenstown</option></select>I think that this would help:
<select name="select_1"><optgroup label="First optgroup category"><option selected="selected" value="0">Select element</option><option value="2">Option 1</option><option value="3">Option 2</option><option value="4">Option 3</option></optgroup><optgroup label="Second optgroup category"><option value="5">Option 4</option><option value="6">Option 5</option><option value="7">Option 6</option></optgroup></select><option value="" selected style="display:none">Please select one item</option>Using selected and using display: none; for hidden item in list.
You can add an option tag on top of the others with no value and a prompt like this:
<select><option value="">Choose One</option><option value ="sydney">Sydney</option><option value ="melbourne">Melbourne</option><option value ="cromwell">Cromwell</option><option value ="queenstown">Queenstown</option></select>Or leave it blank instead of saying Choose one if you want.
Typically, I would suggest that you use the <optgroup> option, as that gives some nice styling and indenting to the element.
The HTML element creates a grouping of options within a element. (Source: MDN Web Docs:
<optgroup>.
But, since an <optgroup> cannot be a selected value, you can make an <option selected disabled> and then stylize it with CSS so that it behaves like an <optgroup>....
.optionGroup {font-weight: bold;font-style: italic;}<select><option class="optionGroup" selected disabled>Choose one</option><option value="sydney" class="optionChild"> Sydney</option><option value="melbourne" class="optionChild"> Melbourne</option><option value="cromwell" class="optionChild"> Cromwell</option><option value="queenstown" class="optionChild"> Queenstown</option></select>With a default option having selected attribute
<select><option value="" selected>Choose your city</option><option value ="sydney">Sydney</option><option value ="melbourne">Melbourne</option><option value ="cromwell">Cromwell</option><option value ="queenstown">Queenstown</option></select>The first option's text will always display as default title.
<select><option value ="">What is the name of your city?</option><option value ="sydney">Sydney</option><option value ="melbourne">Melbourne</option><option value ="cromwell">Cromwell</option><option value ="queenstown">Queenstown</option></select>You can create dropdown title | label with selected, hidden and style for old or unsupported device.
<select name="city" ><option selected hidden style="display:none">What is your city</option><option value="1">Sydney</option><option value="2">Melbourne</option><option value="3">Cromwell</option><option value="4">Queenstown</option></select>I added a <div> and it worked fine
<div title="Your title here!"><select><option value="sydney">Sydney</option><option value="melbourne">Melbourne</option><option value="cromwell">Cromwell</option><option value="queenstown">Queenstown</option></select></div>The option disabled
<select id="county"><option value='japan' disabled>Japan</option><option value='india'> India</option><option value='kuwait'> Kuwait</option><option value='Malaysia'> Malaysia</option><option value='maldives'> Maldives</option></select><select name="city"><option value ="0">What is your city</option><option value ="1">Sydney</option><option value ="2">Melbourne</option><option value ="3">Cromwell</option><option value ="4">Queenstown</option></select>You can use the unique id for the value instead