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
cheap jordans
louis vuitton handbags
cheap nfl jerseys
supra for sale
christian louboutin shoes
fitflops sale clearance
uggs
michael kors outlet
toms shoes
lebron james shoes
20161228caiyan
Post a Comment