JSFiddle - React, Tailwind, and code Playground

by alekskorovin

HTML

<!doctype html>
<!--[if lt IE 7 ]>
<html lang="en" class="ie6"><![endif]-->
<!--[if IE 7 ]>
<html lang="en" class="ie7"><![endif]-->
<!--[if IE 8 ]>
<html lang="en" class="ie8"><![endif]-->
<!--[if IE 9 ]>
<html lang="en" class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html lang="en"><!--<![endif]-->
<head>
    </head>
    <body>
                <div style="margin-top: 38px;" class="attr-holder">
                    <div class="attr-sel-box">
                    <select style="width: 128px;" id="Attributes" name="Attributes" class="jqClosed">
                    
                        <option selected="selected" value="418">White: dsaf akljshdf;ls;lfhasdlpf;asdhf;lhsdfasfasd fasdfasdfsdfasd fsdfdf </option>
                    
                        <option value="419">Black: dsaf akljshdf;ls;lfhasdlpf;asdhf;lhsdfasfasd fasdfasdfsdfasd fsdfdf </option>
                    
                    </select>
                    </div>
                </div>

</body>
</html>

CSS

.jqClosed {
                        max-width: 369px;
                    }
                    .ie8 .attr-sel-box {
                        position: absolute;
                        width: 500px;
                    }
                    .ie8 .jqClosed {
                        max-width: 100%;
                    }
                    .product_detal_page .prod_info {
                        overflow: visible;
                    }
                    .attr-holder {
                        position: relative;

JavaScript

var el;
            
            $(".ie7 select.jqClosed, .ie8 select.jqClosed")
                .each(function() {
                    el = $(this);
                    el.data("origWidth", el.outerWidth()) // IE 8 will take padding on selects
                })
                .mouseenter(function(){
                    $(this).focus();
                    $(this).css("width", "auto");
                })
                .bind("blur change", function(){
                    el = $(this);
                    el.css("width", el.data("origWidth"));
                });