The Markup:
<div class='select'>
<input type='hidden' value='0' class='input' name='choose' />
<span class='selected'></span>
<span class='arrow'></span>
<ul class='options'>
<li class='option' data-id='1'>Huguinho</li>
<li class='option' data-id='2'>Zezinho</li>
<li class='option' data-id='3'>Luizinho</li>
</ul>
</div>
The JS:
var Combo;
(function(){
$('.select')
.on('click', 'li.option', function(){ Combo.select(this) })
.on('click', 'span.selected, span.arrow', function(){ Combo.toggle() });
Combo = {
el: '.select',
ul: 'ul.options',
run: function(){
this.select('li.option:first');
this.toggle();
},
toggle: function(){
$(this.ul).toggle();
$('span.arrow').toggleClass('open');
},
select: function(li){
this.toggle();
$('.input').val( $(li).data('id') );
$(this.el).children('span.selected').html( $(li).text() );
}
};
Combo.run();
}).call(this);
The Style:
div.select {
position: relative;
line-height: 30px;
}
span.selected {
width: 167px;
text-indent: 10px;
border: 1px solid #36A9E1;
border-right: none;
overflow: hidden;
font-family: 'Lucida Grande', sans-serif;
font-size: 12px;
background: #36A9E1;
}
span.arrow {
width: 30px;
border: 1px solid #36A9E1;
text-align: center;
background: #36A9E1;
}
span.arrow.open {
background-color: #FAFAFA;
border: 1px solid #CCC;
border-bottom: 0;
border-left: 1px solid #FAFAFA;
color: #000;
}
span.arrow:before {
content: '\232A';
}
span.arrow.open:before {
content: '\2329';
}
span.arrow,
span.selected {
position: relative;
float: left;
height: 30px;
z-index: 1;
cursor: pointer;
color: #FFF;
}
ul.options {
position: absolute;
top: 28px;
left: 0;
width: 198px;
border: 1px solid #ccc;
background: rgb(250, 250, 250);
padding-top: 2px;
display: none;
margin: 0;
list-style: none inside none;
padding-left: 0;
}
li.option {
display: block;
line-height: 20px;
padding: 5px 0 5px 10px;
font-size: 12px;
font-weight: bold;
font-family: 'Lucida Grande', sans-serif;
list-style: none;
margin: 0;
cursor: pointer;
}
li.option:hover {
color: #FFF;
background: #36A9E1;
}