How to remove select highlight on clicking the select label in IE.
It is working fine in all other browsers.
<label class="fieldLabel specialinput" for="9d95e2bb-6b28-4153-96b5-9ebcd1937c44">Age</label>
<select name="9d95e2bb-6b28-4153-96b5-9ebcd1937c44" id="9d95e2bb-6b28-4153-96b5-9ebcd1937c44" data-val-required="Age" data-val="true">
<option value=""></option>
<option value="24">24</option>
<option value="54">54</option>
<option value="3">3</option>
</select>
enter image description here
The highlighting of select will not occur by making label not clickable.
label{
pointer-events:none;
}
Try to remove the label's for property, like this:
<label class="fieldLabel specialinput" >Age</label>
<select name="9d95e2bb-6b28-4153-96b5-9ebcd1937c44" id="9d95e2bb-6b28-4153-96b5-9ebcd1937c44" data-val-required="Age" data-val="true">
<option value=""></option>
<option value="24">24</option>
<option value="54">54</option>
<option value="3">3</option>
</select>
I am trying to hide the placeholder text in a dropdown menu from showing up as a selectable option. I have searched other options on stack overflow and tried the following solution but none have worked:
<option style="display:none" >Select Stop</option>
<option value="" disabled selected hidden >Select Stop</option>
<option value="" disabled selected style="display: none;">Select Stop</option>
My code looks like this which WORKS in stackoverflow but not when I put it into my site using latest version of chrome...
<select>
<option value="" disabled selected hidden>Select Stop</option>
<option value="home">home</option>
<option value="school">school</option>
<option value="office">office</option>
</select>
Not sure what are you actually trying achieve, to hide the select or option simply add disabled to them, see below, i have 2 select, one with option disbaled other one the entire select disabled
<select>
<option value="">Select Stop</option>
<option value="home" >home</option>
<option value="school" disabled>school</option>
<option value="office" >office</option>
</select>
<select disabled>
<option value="" >Select Stop</option>
<option value="home" >home</option>
<option value="school" >school</option>
<option value="office" >office</option>
</select>
Maybe you might want to add some JQuery into your file
$(function() {
$('.location').find('option:contains(office)').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class='location'>
<option value="select stop">Select Stop</option>
<option value="home">home</option>
<option value="school">school</option>
<option value="office">office</option>
</select>
There is a requirement in my project like.,
I have select box in desktop view and in mobile only options has to be displayed.
I got stuck how to display all the options without selecting select box .
<h3>Desktop View</h3>
<select name="carmakes" id="carmakes">
<option selected='selected' value="0">Car makes</option>
<option value="bmw">BMW</option>
<option value="audi">Audi</option>
</select>
<br/><br/><br/><br/>
<h3>Mobile View</h3>
<option selected='selected' value="0">Car makes</option>
<option value="bmw">BMW</option>
<option value="audi">Audi</option>
Thanks
Demo
Just give multiple for your select box and it'll display like that...
<select multiple name="carmakes" id="carmakes">
<option selected='selected' value="0">Car makes</option>
<option value="bmw">BMW</option>
<option value="audi">Audi</option>
</select>
Is it possible to not show the first option as selected in a <select>, without adding a blank option?
<select id="location" name="location" class="form-control">
<option value="Canada">Canada</option>
<option value="France">France</option>
<option value="Germany">Germany</option>
<option value="Italy">Italy</option>
<option value="Mexico">Mexico</option>
<option value="Russia">Russia</option>
<option value="Spain">Spain</option>
<option value="United Kingdom">United Kingdom</option>
<option value="United States">United States</option>
</select>
Thanks
Steve
No.
Typically you might add something like:
<option value="0">Please select a country</option>
Then in your JS check if it's got a value of 0 before form submit.
I believe it's possible as described in here: w3schools
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="vw">VW</option>
<option value="audi" selected>Audi</option>
</select>
Example: Link
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?"
<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>
<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