Styled Popup Menu

This idea is from Veer.com and how they handle the dropdowns for things like T-Shirt sizes. Thank you to Dennis Sa.

View Demo

HTML

We'll wrap a regular text input inside an <div>, which also contains an unordered list which will represent the values for the popup menu.

<div class="size">
 <input type="text" name="test" value="choose your size" class="field" readonly="readonly" />
 <ul class="list">
  <li>Male - M</li>
  <li>Female - M</li>
  <li>Male - S</li>
  <li>Female - S</li>
 </ul>
</div>

CSS

The lists will be hidden by default, but still all styled up and ready to go when a click triggers them to be shown.

.size { position:relative }
.size .field {
 width:300px; background:#EC6603; color:#fff; padding:5px; border:none; cursor:pointer;
 font-family:'lucida sans unicode',sans-serif; font-size:1em;
 border:solid 1px #EC6603;
 -webkit-transition: all .4s ease-in-out;
 transition: all .4s ease-in-out;
}
.size .field:hover {
 border:solid 1px #fff;
 -moz-box-shadow:0 0 5px #999; -webkit-box-shadow:0 0 5px #999; box-shadow:0 0 5px #999
}
.size>ul.list { display:none;
 position:absolute; left:30px; top:-30px; z-index:999;
 width:300px;
 margin:0; padding:10px; list-style:none;
 background:#fff; color:#333;
 -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;
 -moz-box-shadow:0 0 5px #999; -webkit-box-shadow:0 0 5px #999; box-shadow:0 0 5px #999
}
.size>ul.list li {
 padding:10px;
 border-bottom: solid 1px #ccc;
}
.size>ul.list li:hover {
 background:#EC6603; color:#fff;
}
.size>ul.list li:last-child { border:none }

jQuery

We'll throw a quick plugin together, so that this functionality can be called on any div wrapper that contains this same HTML setup.=

(function($){
 $.fn.styleddropdown = function(){
  return this.each(function(){
   var obj = $(this)
   obj.find('.field').click(function() { //onclick event, 'list' fadein
   obj.find('.list').fadeIn(400);

   $(document).keyup(function(event) { //keypress event, fadeout on 'escape'
    if(event.keyCode == 27) {
    obj.find('.list').fadeOut(400);
    }
   });

   obj.find('.list').hover(function(){ },
    function(){
     $(this).fadeOut(400);
    });
   });

   obj.find('.list li').click(function() { //onclick event, change field value with selected 'list' item and fadeout 'list'
   obj.find('.field')
    .val($(this).html())
    .css({
     'background':'#fff',
     'color':'#333'
    });
   obj.find('.list').fadeOut(400);
   });
  });
 };
})(jQuery);

Usage

Then we just call the plugin, when the DOM is ready of course.

$(function(){
 $('.size').styleddropdown();
});