Вот код на jquery. А там уже стилизуй как угодно)
function selectStyle(){
$('.select').each(function(){
// Variables
var $this = $(this),
selectOption = $this.find('option'),
selectOptionLength = selectOption.length,
selectedOption = selectOption.filter(':selected'),
dur = 500;
$this.hide();
// Wrap all in select box
$this.wrap('<div class="select"></div>');
// Style box
$('<div>',{
class: 'select__gap',
// text: 'Please select'
text: $(this).find('option:first-child').html(),
}).insertAfter($this);
var selectGap = $this.next('.select__gap'),
caret = selectGap.find('.caret');
// Add ul list
$('<ul>',{
class: 'select__list'
}).insertAfter(selectGap);
var selectList = selectGap.next('.select__list');
// Add li - option items
for(var i = 0; i < selectOptionLength; i++){
$('<li>',{
class: 'select__item',
html: $('<span>',{
text: selectOption.eq(i).text()
})
})
.attr('data-value', selectOption.eq(i).val())
.appendTo(selectList);
}
// Find all items
var selectItem = selectList.find('li');
selectList.slideUp(0);
selectGap.on('click', function(){
if(!$(this).hasClass('open')){
$(this).addClass('open');
selectList.slideDown(dur);
selectItem.on('click', function(){
var chooseItem = $(this).data('value');
$('select').val(chooseItem).attr('selected', 'selected');
selectGap.text($(this).find('span').text());
selectList.slideUp(dur);
selectGap.removeClass('open');
});
} else {
$(this).removeClass('open');
selectList.slideUp(dur);
}
});
});
}
.select{
position: relative;
display: block;
width: 100%;
margin-bottom: 20px;
border: 1px solid #bcbcbc;
outline: none !important;
&:focus{
outline: none !important;
}
}
.select__gap{
position: relative;
overflow: hidden;
margin-bottom: -1px;
padding: 10px 20px;
border-bottom: 1px solid #bcbcbc;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
transition: all .3s;
&:before{
content: '\f107';
position: absolute;
right: 10px;
top: 50%;
font: normal normal normal 14px/1 FontAwesome;
transform: translateY(-50%);
transition: all .3s;
}
&.open{
margin-bottom: 15px;
&:before{
transform: translateY(-50%) rotate(180deg);
}
}
}
.select__list{
padding: 0;
li{
margin: 0;
padding: 5px 20px;
cursor: pointer;
transition: all .3s;
&:before{
display: none;
}
&:hover{
background: #f6f6f6;
color: #5e5e5e;
}
}
}