$(function(){
$.fn.ieSelect = function(w){
if(!$.browser.msie && $.browser.version>=8) return;
return this.each(function(){
var $this = $(this),
reset = function(){
$this.width(w).data('clicked', false);
},
auto = function(){
$this.width('auto')
};
$this
.wrap("<div style='zoom:1;display:inline;position:relative; width:"+(this.offsetWidth)+"px; height:"+(this.offsetHeight)+"px'/>")
.css('position', 'absolute')
.click(function(){
$.data(this, 'clicked', !$.data(this, 'clicked'));
})
.mouseout(function(){
if(!$.data(this, 'clicked')) reset();
})
.mouseover(auto)
.blur(reset).change(reset);
});
};
$("#wide").ieSelect(100);
});
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>IE6/7 select box width</title>
</head>
<body>
<div class="wrap">
<select id="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>
Some content after
<br/>
Some Content below
</div>
</body>
</html>
select { width: 100px; }
select.expand { width: auto; }
.wrap{width:200px; border:1px solid #888;margin:20px;}