CODEWITHSUNDEEP
javascriptjqueryhtmlcssdrop-down-menu
Dragonfly
Dragonfly

Reputation: 4361

Invisible but clickable drop down box?

Is it possible to do this in css/jquery?

I want a drop box that is invisible so there is no arrow or the selected text. Basically if you click on the area, the drop down list will open up so you can select one of the choice. After you select an option, I will do something.

Nothing should be showing if it is not open. And if it is open, only the drop down is showing and not the currently selected.

EDIT:When its open, I want it look like the right and not the left in this image: http://i.minus.com/iBLX1F1Au1Rt7.png

Upvotes: 0

Views: 2824

Answers (4)

fliim
fliim

Reputation: 2189

apply an opacity = 0 to the select ?

Upvotes: 2

Isaac Gonzalez
Isaac Gonzalez

Reputation: 1734

Something like this should work:
CSS:

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

Javascript

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

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

Upvotes: -1

jrummell
jrummell

Reputation: 43087

That's a strange requirement, but you could probably toggle css the drop down's visibility property onclick. 

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

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

Upvotes: 0

Diego ZoracKy
Diego ZoracKy

Reputation: 2285

Start by using visibility: hidden rather than display: none

Upvotes: 2

Related Questions