1
4

2 回答 2

4

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/

于 2012-08-02T16:33:44.323 回答
0

我不知道用 javascript 做到这一点的方法，但我认为你可以很容易地让你自己拥有。如果您制作一个向下箭头的图像，当您单击它时，它可以在下方显示选择的所有选项。这与为导航栏创建下拉菜单几乎完全相同。如果您想采用这种方法，您可以查看这个生成器的下拉菜单： http: //purecssmenu.com/或者当然也可以编写您自己的代码。

干杯!

于 2012-08-02T16:28:36.653 回答