Geek Answers Handbook

Width control for selection window

i tried to change the width of a specific optional value in the <select> attribute, something like this . But I'm worried, as in IE, the selection field is expanding along with the parameter value. Is there an easy way to make <option> just for extension and not for window <select> .. mainly in IE ....

+4
source share
3 answers
 <select width="123" style="width: 123px;">...</select>

This seems to be a completely compatible solution, working with all new browsers.

+5
source

This can be done using the jQuery plugin found in
http://www.jainaewen.com/files/javascript/jquery/ie-select-style/#demo

The plugin is very easy to use. Some full working code is broken here.

HTML

 <select id="test" > <option>choose on</option> <option>aaaaaaaaaaaaaaaaaaaaaaa</option> <option>bbbbbbbbbbbbbbbbbbbbbbb</option> <option>ccccccccccccccccccccccc</option> <option>ddddddddddddddddddddddd</option> </select>

CSS

 #test{ width:100px; border:1px solid red; }

JQuery

Do not forget to include the jquery js file and the js file of this plugin.

 <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 add the following:

 <script type="text/javascript"> $('#test').ieSelectStyle(); </script>

All this should pass to the closing </body>

Check out the working example at http://jsfiddle.net/7Vv8u/2/

+4
source

Styling <select> elements is a bit of a problem since there is no cross-browser solution without using JavaScript - since each browser handles the visualization of form controls differently.

I would suggest using a <ul> element and applying functionality / design to act more like a <select> element - using JavaScript

this article can help you with this

0
source

More articles:


All Articles