Question

我想要一个选择下拉菜单，但它只会显示箭头。

所以一切都以相同的方式工作，但不会显示所选/当前值。您唯一可以点击的是小下拉箭头按钮。

这可以在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;}

我做了一个小提琴：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/

Answer 2

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

干杯！

隐藏<select>元素中的选定值？</select>

2 个答案: