How To Fix This "Select" Drop Down Using Css

Question

This text "Third OMG! How can one option contain soooo many words? This really is a lot of words." make my Select box width more than 300px.

<form action="" method="get">
<select name="monster-widget-just-testing">
<option value="0">First
</option><option value="1">Second
</option><option value="2">Third OMG! How can one option contain soooo many words? This really is a lot of words.
</option></select>
</form>

View the demo in here > http://jsfiddle.net/VHf9r/

How to make the box width box always 300px with that text???

Please help me.

Thank you

I don't think there's a way to adjust the width of the "drop down part" of `select`... — Ali Bassam, May 24 '13 at 22:51
Are you trying to control the width of the drop-down part of the `select` box (as opposed to the part that is always visible)? — Kevin Boucher, May 24 '13 at 23:22

score 1 · Accepted Answer · edited May 23 '17 at 10:25

1

The following CSS works in all of the main browsers except for Google Chrome. I don't know about a solution for chrome but yes this works:

#myselect { 
width:300px; 
} 
#myselect option { 
width:300px; 
}

Just append the myselect id to the select element like so:

<select id="myselect" name="monster-widget-just-testing">

More about this here: Set width of dropdown element in HTML select dropdown options

Here is a jsFiddle:

http://jsfiddle.net/sVv6x/

To OP: This will not work in Google Chrome, however it does work in Firefox and other browsers (I have just tested it and it works O.K)

edited May 23 '17 at 10:25

Community

1
1

answered May 24 '13 at 22:51

adaam

3,700
7
27
51

1

Including `option` here probably isn't necessary. – Kevin Boucher May 24 '13 at 23:13
@v123shine See my edit - Chrome is problematic – adaam May 24 '13 at 23:32

score 0 · Answer 2 · answered May 24 '13 at 22:55

0

Or this one: .widget_text select { min-width: 300px; }

answered May 24 '13 at 22:55

Thomas Fonseca

542
4
12

This set the min width, i think you mean `max-width` – Karl-André Gagnon May 24 '13 at 23:00
No I meant min-width Karl. If you look at the J.S. Fiddle the option list is too narrow so min-width would not allow anything less than 300px. Max-width will not help at all. – Thomas Fonseca May 28 '13 at 15:32

How To Fix This "Select" Drop Down Using Css

2 Answers2