JSFiddle - React, Tailwind, and code Playground

HTML

<p>@see <a href="http://stackoverflow.com/a/2516571/157882">http://stackoverflow.com/a/2516571/157882</a>
<h1>With auto-width</h1>
<select class="wide">
    <option>Lorem ipsum dolor sit amet</option>
    <option>consectetur adipiscing elit</option>
    <option>Etiam elementum</option>
    <option>a arcu</option>
    <option>fringilla eu malesuada </option>
    <option>quam scelerisque</option>
    <option>Curabitur ut nisi neque</option>
</select>
<h1>Without auto-width</h1>
<select>
    <option>Lorem ipsum dolor sit amet</option>
    <option>consectetur adipiscing elit</option>
    <option>Etiam elementum</option>
    <option>a arcu</option>
    <option>fringilla eu malesuada </option>
    <option>quam scelerisque</option>
    <option>Curabitur ut nisi neque</option>
</select>

CSS

select {
    width: 100px; /* Or whatever width you want. */
}
select.expand {
    width: auto;
}

JavaScript

if (!$.support.leadingWhitespace) { // if IE6/7/8
    $('select.wide')
        .bind('focus mouseover', function() { $(this).addClass('expand').removeClass('clicked'); })
        .bind('click', function() { $(this).toggleClass('clicked'); })
        .bind('mouseout', function() { if (!$(this).hasClass('clicked')) { $(this).removeClass('expand'); }})
        .bind('blur', function() { $(this).removeClass('expand clicked'); });
} else {
    alert('Hey, you are not using IE6/7/8 at all!');
}