i was trying to change the width of a particular optional value under <select>
attribute, something like this. But i am getting troubled as in IE the select box along with the option value gets expanded. Is there any simple way to make the <option>
only to expand and not the <select>
box.. mainly in IE ....
<select width="123" style="width: 123px;">...</select>
Seems to be quite compatible solution working with all newer browsers.
This can be done using the jQuery plugin found at
http://www.jainaewen.com/files/javascript/jquery/ie-select-style/#demo
The plugin is very simple to use. Here's a breakdown of some full working code.
<select id="test" >
<option>choose on</option>
<option>aaaaaaaaaaaaaaaaaaaaaaa</option>
<option>bbbbbbbbbbbbbbbbbbbbbbb</option>
<option>ccccccccccccccccccccccc</option>
<option>ddddddddddddddddddddddd</option>
</select>
#test{
width:100px;
border:1px solid red;
}
Don't forget to include the jQuery Js file and this plugins' Js file.
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://files.jainaewen.com/files/javascript/jquery/ie-select-style/jquery.ie-select-style.min.js"></script>
Then put the following right after:
<script type="text/javascript">
$('#test').ieSelectStyle();
</script>
All this should go before the closing </body>
tag
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With