By default a dropdown menu (select HTML tag) will display at the width of its widest option. Here are a couple of examples:
A lot of the time, to save on screen space, what we actually would want would be something more like this:
This can be done with JavaScript but there’s a simple solution using just a bit of CSS. You can set the width of the select and option elements using CSS but the option width is always bound by the select width so that won’t work.
The way we get around it is to set the width of the select element when it is in use, using :focus. Firstly, here’s the simple HTML:
<select>
<option>Please Select</option>
<option>Option One is much longer than the select box</option>
<option>Option Two is much longer than the select box</option>
<option>Option Three is much longer than the select box</option>
<option>Option Four is much longer than the select box</option>
</select>
<option>Please Select</option>
<option>Option One is much longer than the select box</option>
<option>Option Two is much longer than the select box</option>
<option>Option Three is much longer than the select box</option>
<option>Option Four is much longer than the select box</option>
</select>
and the CSS:
select {width:120px;}
select:focus {width:300px;}
select:focus {width:300px;}
This should work in any common browser from IE8 onwards though IE8 will require a
<!DOCTYPE> in order to support :focus.
Is it screenshot or you have cut it in paint? Becouse, your code do not work in no one of 5 major browsers. When it get focus, the select will be resized too, not only options. And it broke all style,