html - Dropdown Selector not behaving in IE9 -
i have simple hidding dropdown behaves in firefox , chrome, when used in ie9 options not selectable.
<style media="screen" type="text/css"> .mainhn{ top:120px; left:184px; display: block; width: 290px; height:100px; color: #bdbdbd; position:absolute; background-color: #ffffff; } .mainhn:hover .inthn { display: block; } .inthn{ display: none; width: 300px; height:150px; margin: 0 auto; position: absolute; } .hiddingnode{ width: 250px; height:70px; margin: 0 auto; background-color: #fdfbfb; color: #bdbdbd; padding:2px; border:2px solid; position: absolute; } </style> <div class="mainhn"> <div class="inthn"> <div class="hiddingnode"> <form id="faform" action="aaaa" method="post"> <div> <select id=faselect name=faselect> <option selected="selected" value="233">option a</option> <option value="123">option b</option> <option value="1075">option c</option> </select> </div> <div> <input type="submit" value="save"> </div> </form> </div> </div> </div>
it works if disable hidding feature (display none/block) defeats purpose. 1 knows reason?
<select>
replaced element, , result ui elements may not part of dom itself. therefore, when mouse on option, no longer hovering on "main" element , gets hidden. causes select hidden, , hidden select can't worked on user.
there's no easy fix this, consider using onfocus
event on <select>
force browser keep visible (apply class parent element?) , of course onblur
cancel that.
Comments
Post a Comment