how do I only show the "arrow" in a HTML select element?

html

Solution

Solution for Chrome only

(maybe webkit in general, but I can't test that)

I tried it in old IE7/8, doesn't work because it cuts off the dropdown to the set width as well. Firefox doesn't show the arrow and instead cuts the text off since it left-aligns.

Solution is as follows:

Should be pretty easy to just set the width of the control via CSS and limit it to the arrow. Simple example I built for Chrome (doesn't really work in other browsers):

​<select style="width:18px">
    <option value="10000">Something</option>
    <option value="100">Other thing</option>
    <option value="1">The last option</option>
</select>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

Example fiddle: http://jsfiddle.net/Fs7G5/

Problem

Basically, I want to be able to just show the drop-down arrow and not the text-box associated to that drop-down arrow. I don't want to display the value, but the javascript onchange event will still fire if someone changes the selection. Idea's? Paul

Original source