Making ‘option’ element wider than its ‘select’ with CSS

By default a dropdown menu (select HTML tag) will display at the width of its widest option. Here are a couple of examples:

A select box with options shorter than the initial displayA select box with options longer than the initial display

A lot of the time, to save on screen space, what we actually would want would be something more like this:

A shorter select box with longer options

 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>

and the CSS:

select {width:120px;}
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.

About Chris Smith

Web developer specialising in frontend UI design @chris22smith
This entry was posted in :focus, css, html, select and tagged , , , , , , , , , , , . Bookmark the permalink.

3 Responses to Making ‘option’ element wider than its ‘select’ with CSS

  1. Yog says:

    It works ;]

  2. n00b says:

    this isnt working!

  3. BASILIO says:

    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,

Comments are closed.