Стилизация пользовательского select при помощи input

Часто бывают такие ситуации, что требуется стилизовать выпадающий список select, но стилизовать его полностью стандартными средствами нельзя. Поэтому решить эту проблему поможет такая конструкция:

<div class="pseudoselect">
<input value="" class="pseudoselect__inp orderby" name="orderby" type="text" hidden="">
<div class="pseudoselect__top pseudoselect__img">Исходная сортировка</div>
<ul class="pseudoselect__list" style="display: none;">
<li class="active" data-val="menu_order">
<a href="#">Исходная сортировка</a>
</li>
<li data-val="popularity">
<a href="#">По популярности</a>
</li>
<li data-val="rating">
<a href="#">По рейтингу</a>
</li>
<li data-val="date">
<a href="#">По новизне</a>
</li>
<li data-val="price">
<a href="#">Цены: по возрастанию</a>
</li>
<li data-val="price-desc">
<a href="#">Цены: по убыванию</a>
</li>
</ul>
</div>

Из основного:

• У нас имеется обычный список, который мы скрываем.
• В списке у тега <li> у нас есть атрибуты. Они выступают в роли value у option.
• Скрытый input. Он нам необходим для дальнейшей обработки.

Теперь немного jquery:

$(document).ready(function(){
// select
$(document).click(function () {
$(".pseudoselect__list").slideUp();
$(".sidebar-select-top").removeClass("open");
$(".sidebar__overlay").slideUp();
});

$(".pseudoselect").click(function (e) {
e.stopPropagation();
});

$(".pseudoselect__top").click(function () {
$(this).parent().children(".pseudoselect__list").slideToggle();
$(this).parent().children(".sidebar-select-top").toggleClass("open");

});

$(".sidebar-select-top").click(function () {
if ($(window).width() < 600) {
$(".sidebar__overlay").toggle();
}
});

$(".pseudoselect__list li").click(function () {
$(this).parent().children("li").removeClass("active");
$(this).addClass("active");
$(".pseudoselect__list").slideUp();
var valuetxt = $(this).children("a").text();
var valueAppend = $(this).attr("data-val");
$(this).parent().parent().children(".pseudoselect__top").empty().append(valuetxt);
$(".pseudoselect__inp").empty().val(valueAppend);
$(".sidebar__overlay").slideUp();
});

});