HTML：

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

CSS：

    #selectshowarrowonly{width:15px;}

私は次の場所でフィドルを作成しました：http：//jsfiddle.net/M8Zmc/

このクロスブラウザを使いやすくすることにこだわる場合は、矢印に独自の画像を使用して、幅と高さを修正できます。

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>

繰り返しますが、フィドルは次の場所にあります：http: //jsfiddle.net/M8Zmc/3/

JavaScript でこれを行う方法はわかりませんが、かなり簡単に自分のものにすることができると思います。下向き矢印の画像を作成すると、それをクリックすると、その下にある選択のすべてのオプションが表示されます。これは、ナビゲーション バーのドロップダウン メニューを作成するのとほぼ同じです。このアプローチを採用したい場合は、このジェネレーターでドロップダウン メニューを確認できます: http://purecssmenu.com/または、もちろん独自のコードを作成します。

乾杯！