Demo here
HTML:
display:none <b>not works</b>,the hidden can <b>not select</b>.<br>
<select size="5">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="G">G</option>
<option value="H">H</option>
<option value="I">I</option>
</select><br>
display:none <b>works</b>,the hidden <b>can select</b>.<br>
<select>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="G">G</option>
<option value="H">H</option>
<option value="I">I</option>
</select>
CSS:
select{width:50px;}
[value=C]{
display: none;
}
/* will hold the position */
[value=B]{
visibility: hidden;
}
The size attribute will affect the display and visibility, what happen to this ?
How can I hide the option in select which has a size attribute ?
See updated section
I think you can not do that only with CSS for all browsers you'll need some JS code, there is a previous question quite similar:
How to hide a <option> in a <select> menu with CSS?
In Chrome (v. 30) "display:none" doesn't work, however in Firefox (v. 24) It works, the option with "display:none" doesn't appear in the list.
UPDATE2:
In the current Chrome (v. 70) an Firefox (v. 63) versions, the use of css with "display:none" along with attribute "disabled" in the option tag removes the option from the list and it doesn't appear any more.
<html><body>
<select>
<option disabled style="display:none">Hola</option>
<option>Hello</option>
<option>Ciao</option>
</select>
</body></html>
Thanks to #achecopar for the help
The property Display:none wont work on the options tag
so you have only two options as work around
1. Either disable then with disabled="disabled".
2. Remove the options you don't want to see and insert them again when needed.
you may be able to find some other work around too, but i don't think it will be consistent in all the browsers
There is a technique for hiding options within a select in this post: How to hide a <option> in a <select> menu with CSS?
Use following jQuery to hide and show under select
jQuery(selector).toggleOption(true); // show option
jQuery(selector).toggleOption(false); // hide option
is you need this...
<select>
<option value="A">A</option>
<option disabled value="B">B</option>
<option value="C">C</option>
<option disabled value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="G">G</option>
<option value="H">H</option>
<option value="I">I</option>
</select>
the disable value are not select-able.
if you want to hide go here..
http://jsbin.com/anoci
Related
I have an issue select box on ie only. If it have both the attribute selected and disabled together it breaks the default style. Is it have any solution for this problem?
Click on image for a larger version of the image.
Example code is attached with this description.
<select>
<option value="volvo" selected disabled>Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
they only workaround i could think of was to change the background-color of the disabled option to the default background-color a disabled button has, which is #f4f4f4
you should also add a conditional so the code will work only for IE . see here for more info > How to target only IE (any version) within a stylesheet?
option:disabled {
background-color:#f4f4f4;
}
<select>
<option value="volvo" selected disabled>Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
I am looking for a way to have a scroll bar in a drop-down list in HTML, such that if the drop-down list contains more than eg. 5 items, a scroll bar will appear for viewing the rest. This is because I will be forced to have some big lists.
I have been googleing it for the past hours, but with no luck.
It needs to work for IE8+, FF and Chrome.
My list currently looks like this:
<select name="Select1" size="1">
<option value="">- Please select a name -</option>
<option value"volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="ford">Ford</option>
<option value="toyota">Toyota</option>
<option value="aston">Aston Martin</option>
<option value="alfa">Alfa Romeo</option>
</select>
I have tried using the following CSS within a Div, but that made no difference.
.myDropDown{
height: 60px;
max-height: 60px;
overflow-y: scroll;
}
Changing the "size" gives a big scroll-able table, which is not what I am after.
http://blogs.msdn.com/cfs-filesystemfile.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-00-70-78-metablogapi/1882.clip_5F00_image001_5F00_thumb.png is an appropriate image of what I'm after.
I have the possibility to use js, php and jQuery if needed, but the simpler the solution, the better.
//Ambrose
You need to give an 'id' to your tag.
it should be like this
HTML 5
<select name="Select1" size="1" id="ddlCars">
<option value="">- Please select a name -</option>
<option value"volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="ford">Ford</option>
<option value="toyota">Toyota</option>
<option value="aston">Aston Martin</option>
<option value="alfa">Alfa Romeo</option>
</select>
CSS
#ddlCars {
min-height:190px;
overflow-y :auto;
overflow-x:hidden;
position:absolute;
width:300px;
display: contents;
}
You cannot change the built-in behaviour of the SELECT element. You may want to consider a JS-based alternative, such at Twitter Bootstrap.
Perhaps I'm missing something but isn't that what the size attribute is for?
JSfiddle
<select name="Select1" size="6">
<option value="">- Please select a name -</option>
<option value"volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="ford">Ford</option>
<option value="toyota">Toyota</option>
<option value="aston">Aston Martin</option>
<option value="alfa">Alfa Romeo</option>
</select>
Is there a way to add an additional 'submenu' to a dropdown list on a contact form? So it would technically work like a drop-down navigation.
Below is the drop-down list for my contact form. And i've been asked to see if I can add additional options to lets say, Existing Partner. So when they hover over that item it expands to other options.
<label for="hear">How did you hear about us? </label>
<select class="contact-drop-down" name="hear" id="hear">
<option>Click to choose</option>
<option value="1">Existing Partner</option>
<option value="2">Word of mouth</option>
<option value="3">Brochure</option>
<option value="4">Email mailshot</option>
<option value="5">Google</option>
<option value="6">Yahoo</option>
<option value="7">Bing</option>
<option value="8">Other search engine</option>
<option value="9">Other</option>
</select>
You can't expand on hover with the standard select within HTML, but you can with either Javascript or HTML5 and CSS3.
This site has a list of 30 examples of HTML5 navigation menus and this site has a large selection of Javascript and JQuery examples.
Hopefully one of these might help you get what you want.
You can use optgroup tag for this.
<select>
<optgroup label="Existing Partners">
<option value="existing_partner_a">Partner A</option>
<option value="existing_partner_b">Partner B</option>
<option value="existing_partner_others">Others</option>
</optgroup>
</select>
No you cannot add sub menu to actual dropdown control. But you may find many custom controls.
Check out this
Saurabh Goyal above suggested to use . I also thought of suggesting the same. But is used for categorization & I dont think thats what you want.
Try optgroup for this .for example
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
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.
I need a way to have a multi-select box that has a disabled element. I want the box to look like:
All
-----or-----
option 1
option 2
with the "----or----" not being able to be selected. So far my code is pretty simple:
<select multiple size="4" >
<option value="0">All</option>
<option value="1">----or----</option>
<option value="2">option 1</option>
<option value="3">option 2</option>
</select>
But as of yet I have been unable to get the '----or----" disabled or unselectable. I've looked around and I'm not sure there is an HTML attribute that will disable it, but I'm really not sure and I'm also not sure this is the best way to present this option. Any help you can offer is greatly appreciated!
Maybe take a look at the optgroup element ?
<select multiple size="4" >
<option value="0">All</option>
<optgroup label="----or----"></optgroup>
<option value="2">option 1</option>
<option value="3">option 2</option>
</select>