Try a demo »
The Function: Please see right hand pane>
function toggleSelectBox(selbox){
if(selbox.size>1){//HIDE:
selbox.size=1;
selbox.style.position='static';
}else{//SHOW:
selbox.size = selbox.options.length;
selbox.style.position='absolute';
selbox.style.height='auto';
}
}
<select id="type" name="type" onmouseout="toggleSelectBox(this)" onmouseover="toggleSelectBox(this)">
<option value="">opt1</option>
<option value="">opt2</option>
<option value="">opt3</option>
</select>
7 comments:
how can I get out the scroll bar?
You can't I'm afraid. It's part of the browser rendering of select boxes. The only option is to create a custom built dropdown menu with css or javascript.
Thanks for your post, worked for me.
I think, it will be better to divide this function on two due to bugs with fast mouse movement ^^
Hi, Looks great. But I need this in such a way that when i select any option by clicking it, it should get selected. And on mouse over of each option it must be highlighted with a background colour.
Please provide your inputs. Thanks in advance.
Hi style-sha,
You can use css to highlight the option but it probably wont work in all browsers and I dont know of any workaround for this:
option:hover{background:red;}
To close the select box when the user clicks, try:
onclick="toggleSelectBox(this)"
after the onmouseout event in the html for the select box
Useful code
Post a Comment