Using CSS for this will only work in Chrome ...
You cannot do this simply by using CSS, but you can use jQuery for a “similar” solution.
Take a look at this quick demo I made: JSnippet DEMO
As you can see, it behaves the way you wanted - I wrap the selection box with a DIV and adding another one that will overlap the selection box - it takes a fixed-width selection box minus a button in the selection box. Now I give this div the same look as the select box + Selected value.
Each time the selection field is changed, a new value will be set in the mask that we created, and the calculated new height will be set in the selection field.
Here is the jQuery code:
$(function(){ var mYbrowser = detectBrows(); console.log(mYbrowser[0]); $('select').each(function(index,ele){ //get current style and fixed width: var renderWidth = $(ele).outerWidth(); var renderWidthFixed = renderWidth; var borderstyle = $(ele).css("border-bottom-style"); var bordercolor = $(ele).css("border-bottom-color"); var borderwidth = $(ele).css("border-bottom-width"); var font = $(ele).css("font"); var defaultValue = $(ele).val(); if (borderwidth == "0px") { borderwidth = "1px"; /*FF*/ } $(ele).css({ cursor:"pointer" }); // set by browser (different buttons): var borderRightParsed = borderwidth +" " + borderstyle + " " + bordercolor; var topParsed = Math.round(parseInt(borderwidth.replace(/[^0-9\.]+/g,""))); switch(mYbrowser[0]) { case "MSIE": renderWidthFixed = renderWidth-28; break; case "I": renderWidthFixed = renderWidth-28; break; case "Chrome": renderWidthFixed = renderWidth-30; break; case "Firefox": renderWidthFixed = renderWidth-27; borderRightParsed= "0"; if (index > 0) topParsed++; break; } //wrap + add a overlapping layer that will hide content and calculate the correct height: $(ele).wrap($('<div />').css({width:renderWidth, margin:0, padding:0, position:"relative"})); $(ele).after($("<div>" + defaultValue + "</div>") .css({ minHeight:20, padding:"5px 0px 5px 8px", width:renderWidthFixed, backgroundColor:"white", whiteSpace:"pre-wrap", position:"absolute", borderRight:borderRightParsed, top:topParsed, cursor:"default", left:borderwidth, font:font }) ); //set select box new height: setHeight(ele); //append change behavior: $(ele).change(function(){ $(ele).next('div').text($(ele).val()); setHeight(ele); }); }); function setHeight(ele) { var newHeight = $(ele).next('div').outerHeight(); $(ele).height(newHeight); } function detectBrows(){ var ua= navigator.userAgent, tem, M= ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || []; if(/trident/i.test(M[1])){ tem= /\brv[ :]+(\d+)/g.exec(ua) || []; return 'IE '+(tem[1] || ''); } if(M[1]=== 'Chrome'){ tem= ua.match(/\bOPR\/(\d+)/) if(tem!= null) return 'Opera '+tem[1]; } M= M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?']; if((tem= ua.match(/version\/(\d+)/i))!= null) M.splice(1, 1, tem[1]); return M; } });
A simple and not difficult task - the problem is that the selection window element behaves and looks different in each browser. I added a small quick function to determine which browser is being used, and fine-tuning its unique values.
This method can be improved, but it is a good starting point.
Shlomo