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>
Related
i have this select input that i want to make round
need this area to be round
here is a fiddle with what i have done
https://jsfiddle.net/kunz/2zu3m614/4/
<select id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
i need to make the option part round is it even possible.
As of now there isn't css styling for the option elements.
However there is a Jquery plugin for this:
http://gregfranko.com/jquery.selectBoxIt.js/
I have a code for select-menu like this.
<select class="custom-select">
<option value="">Select from the list</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
I want to style the drop-down like the following:
I am wondering how can I achieve this with only CSS.
NOTE: I am using bootstrap select-menu.
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>
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
Not sure if this can be done but can I split the text in the option tags?
Example, normal styling:
<select>
<option value="">First - A</option>
<option value="">Car - B</option>
<option value="">Black - C</option>
<option value="">Super Duper - D</option>
</select>
How can I get it to look like this:
<select>
<option value="">First - A</option>
<option value="">Car - B</option>
<option value="">Black - C</option>
<option value="">Super Duper - D</option>
</select>
I've tried added a span tag nested in the option tag but that didn't work
<option> tags do not accept HTML content. You can only pad your selections with spaces to format them.
Alternately, there are plug-in replacements for <select> that use DIVs and ULs instead of <select> that give you more flexibility.
The easier will be to use non proportional (monospaced) font for those boxes and then using right count of nonbreaking spaces like this:
<style>
select{
font-family:monospace;
}
</style>
<select>
<option value="">First - A</option>
<option value="">Car - B</option>
<option value="">Black - C</option>
<option value="">Super Duper - D</option>
</select>