隐形但可点击的下拉框？

Question

是否可以在css / jquery中执行此操作？

我想要一个不可见的投递箱，因此没有箭头或所选文本。基本上，如果您单击该区域，下拉列表将打开，以便您可以选择其中一个选项。选择一个选项后，我会做点什么。

如果没有打开，什么都不应该显示。如果它是打开的，则只显示下拉列表，而不是当前选中的。

编辑：当它打开时，我希望它看起来像这个图像中的右边而不是左边： http://i.minus.com/iBLX1F1Au1Rt7.png

Answer 1

首先使用可见性：隐藏而不是显示：无

Answer 2

将opacity = 0应用于select？

Answer 3

这是一个奇怪的要求，但您可以切换css下拉的可见性属性onclick。

<select id="dropdown" style="visibility:hidden"></select>

$("#dropdown").click(function() { 
     var visibility = $(this).css("visibility") == "hidden" ?  "visible" : "hidden";
     $(this).css("visibility", visibility);
});

Answer 4

这样的事情应该有效： 的 CSS：

.invisible{
    color : transparent;
    background: transparent;
    display : block;
    width : 10px;
    height : 10px;
}

<强>的Javascript

$('.invisible').on('click',function(){
    openDropDownList();
});

$('.option').on('click',function(){
    youWillDoSomething();
});