wainzor,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.select__item.active {
background-color: #DCDCDC;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function() {
$('.select').each(function() {
// Variables
var $this = $(this),
selectOption = $this.find('option'),
selectOptionLength = selectOption.length,
selectedOption = selectOption.filter(':selected'),
dur = 500;
if (!selectedOption.length) selectedOption.eq(0);
$this.hide();
// Wrap all in select box
$this.wrap('<div class="select"></div>');
// Style box
$('<div>', {
class: 'select__gap',
text: selectedOption.text()
}).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');
var defaultLi;
// Add li - option items
for (var i = 0; i < selectOptionLength; i++) {
let selected = selectOption.eq(i)[0] === selectedOption[0];
let cls = selected ? 'select__item active default' : 'select__item';
let li = $('<li>', {
class: cls,
html: $('<span>', {
text: selectOption.eq(i).text()
})
})
.attr('data-value', selectOption.eq(i).val())
.appendTo(selectList);
if (selected) defaultLi = li;
}
$this.on('reset', function() {
defaultLi.click()
})
// Find all items
var selectItem = selectList.find('li');
selectList.slideUp(0);
selectGap.on('click', function() {
if (!$(this).hasClass('on')) {
$(this).addClass('on');
selectList.slideDown(dur);
selectItem.on('click', function() {
var chooseItem = $(this).data('value');
$this.val(chooseItem);
selectGap.text($(this).find('span').text());
selectItem.removeClass('active');
$(this).addClass('active');
selectList.slideUp(dur);
selectGap.removeClass('on');
});
} else {
$(this).removeClass('on');
selectList.slideUp(dur);
}
});
});
$('button').on('click', function() {
$('[name="referrer"]').trigger('reset');
})
});
</script>
</head>
<body>
<select class="select" name="referrer">
<option value="">Значение1</option>
<option value="1">Значение2</option>
<option value="2" selected="selected">Значение3</option>
</select>
<button>reset</button>
</body>
</html>