Question

I want to have a select drop down but it would only show the arrow.

So everything works the same way but the selected/current value will not be shown. The only thing you can click is the small drop down arrow button.

Is this possible in jquery/css?

Answer 1

HTML:

    <select id="selectshowarrowonly">
        <option value="1">Sample String 1</option>
        <option value="2">Sample String 2</option>
    </select>

​
CSS:

    #selectshowarrowonly{width:15px;}

I’ve made a fiddle at: http://jsfiddle.net/M8Zmc/

If you are particular about making this cross-browser friendly, you can use your own image for the arrow and fix the width & height:

CSS:

    #selectshowarrowonly{
         width:50px;  
         height:50px;
         -webkit-appearance: none;
         -moz-appearance: none;
          appearance: none;   
          background: url("http://cdn1.iconfinder.com/data/icons/oxygen/48x48/actions/arrow-down.png") no-repeat;    
     }

HTML:

   <select id="selectshowarrowonly">
        <option value="1"></option>
        <option value="2">Sample String 1</option>
        <option value="3">Sample String 2</option>
   </select>

​
Again the fiddle is at: http://jsfiddle.net/M8Zmc/3/