Select width in HTML

Controlling the width of select lists
= Index dot HTML by Brian Wilson =

Main index | element tree | HTML support history

The issue | possible solutions | recommendation

The issue The default width of a select form control is usually dependent on the width of the widest option item in the list; the width of the select list will basically be not much greater (but no less) than This width. The HTML standards don't allow for a way to control this width. CSS, on the other hand, wocould be perfect for controlling this, but historical support for CSS on Form Controls is rather weak. Solution 1: Using & nbsp; to pad option Element Content Support key :[Ie1|M2a1|N1|O2.1] This solution can work rather well-non-breaking spaces are treated as displayable content, so these can be used to add crude Right and Left "padding" widths to the select control. the one downside of this method is that it is difficult to achieve a precise width for the control. Solution 2: Using a width attribute on the Select Control Support key: [ie | M |N4-4.x| O] This proprietary attribute was added in Netscape 4.X, and has been retired in Netscape 6.x, but this attribute takes as a value a positive integer representing a pixel width for the control. the disadvantage here is that only Netscape 4.x supports it. Solution 3: CSS on the Select Control Support key :[Ie4| M |N6b1|O5] This is by far the best solution, using the 'width' CSS property-and it has the widest support. Recommendation Since Netscape 4 has only the proprietary attribute that will give the desired effect, it will not hurt anything to combine the use of CSS and the width attribute. Example < SelectName = "foo" width = "300" style = "width: 300px"> < Option> One < Option> Two < Option> Three </ Select>