JSFiddle - React, Tailwind, and code Playground

by marhaba

HTML

<h1>With auto-width</h1>
    <select class="wide" style="width:70px">
            <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>
<br/><br/>
        <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>

JavaScript

$(document).ready(function() {
             if ($.browser.msie) 
                $('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 IE at all!');
            });