<select class="form-control" id="service_select">
<option disabled="disabled"></option>
</select>
In chrome it is fine. Is there another way to make it disabled but not hidden ? Thanks.
The option isn't hidden - you just don't have any text in it:
<select class="form-control" id="service_select">
<option disabled="disabled">Place some text here</option>
</select>
If your first option is disabled (and therefore cannot be selected) Firefox will select the first non-disabled option.
<select class="form-control" id="service_select">
<option disabled="disabled">One</option>
<option disabled="disabled">Two</option>
<option>Three</option>
</select>
The first two options can be seen when you inspect the drop-down list, but cannot be selected - so "Three" would be selected in the above example.
If you want to prevent the user from selecting the first option, but want to display it - use the required attribute with an empty value...
<select required>
<option value="">Please select</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
Related
I created a drop down list with links. It works properly except when I go back one page, then instead of the option which is 'selected' in the HTML, it shows the option I had navigated to. I would like it to reset, so that the page I'm on is the one being displayed when the list is collapsed. How can I fix this?
<div id="drop">
<select name="year" id="year" onchange="location = this.value;">
<option value="sermons-2023.html"selected>2023</option>
<option value="sermons-2022.html">2022</option>
<option value="sermons-2021.html">2021</option>
<option value="sermons-2020.html">2020</option>
<option value="sermons-2019.html">2019</option>
<option value="sermons-2018.html">2018</option>
<option value="sermons-2017.html">2017</option>
<option value="sermons-2016.html">2016</option>
<option value="sermons-2015.html">2015</option>
</select>
</div>
You have to save the value with js in localstoreg and then after returning to the previous page you can see that the value is the same
I have a requirement in my project to give a particular type of styling to the default i.e. placeholder value of a select tag when the select is "disabled".
I am aware that it can be given using select:invalid but I find it working only when select is "required" and but I want a solution for the below scenario.
<select disabled>
<option disabled value="" selected>- please choose -</option>
<option value="1">Apple</option>
<option value="2">Banana</option>
</select>
Note:
The requirement I have to resolve is in the select box the placeholder option i.e. the disabled option "-please choose-" has to be in italics and the rest of the options have to be in normal font style. Even when the select box is expanded. so you see in the "required state" I am able to give them different styles using :invalid selector(which doesn't works when the select is in "disabled state"), but in the disabled state, I am able to give just one type i..e italics or normal, if an option is selected and the select box is disabled/made non-editable following some condition, the option is looking like it is a placeholder because of the italics style.
This should work :
select:disabled {
background: red; /* For exemple */
}
I tried my best understanding your problem statement and hence tried to cover the explanatory scenarios which might work for you , please go through the developer comments in both the html and css files.
select:invalid,
select:disabled{
border-color: red;
}
/*
these are the default values which select disabled attribute adds to the CSS of select box by default
opacity: 0.7;
border-color: rgba(118, 118, 118, 0.3);
*/
<!--Scenario 1: Where you had only the required attribute and wanted to validate it by say border red-->
<select required>
<option disabled value="" selected>- please choose -</option>
<option value="1">Apple</option>
<option value="2">Banana</option>
</select>
<!--Scenario 2: where your selectbox is disabled yet shows a required type error-->
<select disabled>
<option disabled value="" selected>- please choose -</option>
<option value="1">Apple</option>
<option value="2">Banana</option>
</select>
Please use this CSS approach in all condition of select menu :-
select{color:pink;}
select option{color:blue;}
select option[disabled]{color: red; font-style:italic;}
select:disabled{color: yellow; font-style:italic;}
<select disabled>
<option disabled value="" selected>- please choose -</option>
<option value="1">Apple</option>
<option value="2">Banana</option>
</select>
<select>
<option disabled value="" selected>- please choose -</option>
<option value="1">Apple</option>
<option value="2">Banana</option>
</select>
try this It's working for me
<select class="form-control">
<option value="" readonly="true" hidden="true" selected>Select your option</option>
<option value="1">Something</option>
<option value="2">Something else</option>
<option value="3">Another choice</option>
</select>
I'm having some weird issues.
I need a multiple select with some values in it, but somehow if I type
multiple and size values to select tag they are not working.
For that I decided to make a new clear file to test it and the result is same.
<form action="" method="post">
<select name="data[]" multiple size="5">
<option value="1">1Value</option>
<option value="2">2Value</option>
<option value="3">3Value</option>
<option value="4">4Value</option>
<option value="4">4Value</option>
<option value="4">4Value</option>
<option value="4">4Value</option>
</select>
</form>
These are my codes, and this is below is the result:
screenshot
I can't even select them one by one, I mean browser is not highlighting the ones that I selected, I need to hold CTRL to hightlight them, as like working on windows I don't know where is the problem.
Most likely you have installed some Chrome extension that is preventing the Ctrl key to work as expected. Try removing that.
Have you bind it inside select tags?, you have to.
<select name="values" multiple>
<option value="1">value1</option>
<option value="2">value2</option>
<option value="3">value3</option>
<option value="4">value4</option>
</select>
Hope it helps.
Please go with HTML multiple Attribute.
Try Below code:
<select name="Custom_Name" multiple>
<option value="1">1Value</option>
<option value="2">2Value</option>
<option value="3">3Value</option>
<option value="4">4Value</option>
<option value="4">4Value</option>
<option value="4">4Value</option>
<option value="4">4Value</option>
Al the best.
I have a dropdown select list, from which I can choose a country. the first option is: choose your country.
<select>
<option selected disabled value=''>Choose your country</option>
<option value="1">Canada</option>
<option value="2">France</option>
</select>
But when I click to open the list, I can see choose your country in the options. Is there a way to hide this option from the list, and only show it as a placeholder before any selection is made?
Hides the default option from appearing in the list:
http://jsfiddle.net/ZT2ZV/
IMO the better solution would be to use something like: http://harvesthq.github.io/chosen/
<select>
<option value='' disabled selected style='display:none;'>Choose your country</option>
<option value="1">Canada</option>
<option value="2">France</option>
</select>
Use display:none; on your first value:
<select>
<option value="" selected disabled style="display:none;">Choose your country</option>
<option value="2">Canada</option>
<option value="3">France</option>
</select>
try http://jsfiddle.net/uaF93/
I am trying to display a multiple select that is disabled and has some options selected. The following fragment works well on Chrome and FF, but I can't seem to see the selected items on IE7. Anyone know a way to make it work?
<select multiple="multiple" disabled="disabled">
<option value="volvo">Volvo</option>
<option value="saab" selected="selected" style="color:white">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi" selected="selected" style="color:white">Audi</option>
</select>
IE7 simply does not support the styling of disabled elements, SELECT especially.