JSFiddle - React, Tailwind, and code Playground

by Сергей Тарасевич

HTML

<select id="konverter_valut_chego">
    <option value="BYR">Белорусских рублей</option>
    <option value="USD" selected>Долларов США</option>
    <option value="EUR">Евро</option>
    <option value="KZT">Казахских тенге</option>
    <option value="CNY">Китайских юаней</option>
    <option value="RUR">Российских рублей</option>
    <option value="UAH">Украинских гривен</option>
    <option value="" disabled>--------------------</option>
    <option value="AUD">Австралийских долларов</option>
    <option value="AZN">Азербайджанских манат</option>
    <option value="GBP">Английских фунтов стерлингов</option>
    <option value="AMD">Армянских драмов</option>
    <option value="BGN">Болгарских левов</option>
    <option value="BRL">Бразильских реалов</option>
    <option value="HUF">Венгерских форинтов</option>
    <option value="KRW">Вон Республики Корея</option>
    <option value="DKK">Датских крон</option>
    <option value="INR">Индийских рупий</option>
    <option value="CAD">Канадских долларов</option>
    <option value="KGS">Киргизских сомов</option>
    <option value="MDL">Молдавских леев</option>
    <option value="NOK">Норвежских крон</option>
    <option value="PLN">Польских злотых</option>
    <option value="RON">Румынских леев</option>
    <option value="XDR">СДР</option>
    <option value="SGD">Сингапурских долларов</option>
    <option value="TJS">Таджикских сомони</option>
    <option value="TRY">Турецких лир</option>
    <option value="TMT">Туркменских манат</option>
    <option value="UZS">Узбекских сум</option>
    <option value="CZK">Чешских крон</option>
    <option value="SEK">Шведских крон</option>
    <option value="CHF">Швейцарских франков</option>
    <option value="ZAR">Южноафриканских рэндов</option>
    <option value="JPY">Японских йен</option>
</select>
<select id="konverter_valut_kuda">
    <option value="BYR">Белорусские рубли</option>
    <option value="USD">Доллары США</option>
    <option value="EUR">Евро</option>
    <option...

CSS

.jq-selectbox {
	vertical-align: middle;
	cursor: pointer;
	text-align: left;
	width: 100%;
	margin: 5px 0;
}
.jq-selectbox__select {
	height: 30px;
	padding: 0 45px 0 10px;
	border: 1px solid #CCC;
	border-bottom-color: #B3B3B3;
	border-radius: 4px;
	background: #F5F5F5 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAIAAABi9+OQAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABdJREFUeNpi+v//PxM2zMDAQEtxgAADAF2uTe9L4getAAAAAElFTkSuQmCC) repeat-x;
	box-shadow: inset 1px -1px #F1F1F1, inset -1px 0 #F1F1F1, 0 1px 2px rgba(0,0,0,0.1);
	color: #333;
	text-shadow: 1px 1px #FFF;
	font: 14px/30px Arial, sans-serif;
}
.jq-selectbox__select:hover {
	background-color: #E6E6E6;
	background-position: 0 -10px;
}
.jq-selectbox__select:active {
	background: #F5F5F5;
	box-shadow: inset 1px 1px 3px #DDD;
}
.jq-selectbox.focused .jq-selectbox__select {
	border: 1px solid #5794BF;
}
.jq-selectbox.disabled .jq-selectbox__select {
	border-color: #CCC;
	background: #F5F5F5;
	box-shadow: none;
	color: #888;
}
.jq-selectbox__select-text {
	display: block;
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.jq-selectbox__trigger {
	position: absolute;
	top: 0;
	right: 0;
	width: 34px;
	height: 100%;
	border-left: 1px solid #CCC;
}
.jq-selectbox__trigger-arrow {
	position: absolute;
	top: 14px;
	right: 12px;
	width: 0;
	height: 0;
	overflow: hidden;
	border-top: 5px solid #000;
	border-right: 5px solid transparent;
	border-left: 5px solid transparent;
	opacity: 0.3;
	filter: alpha(opacity=30);
}
.jq-selectbox:hover .jq-selectbox__trigger-arrow {
	opacity: 1;
	filter: alpha(opacity=100);
}
.jq-selectbox.disabled .jq-selectbox__trigger-arrow {
	opacity: 0.3;
	filter: alpha(opacity=30);
}
.jq-selectbox__dropdown {
	top: 33px;
	width: 100%;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 1px solid #CCC;
	border-radius: 4px;
	background: #FFF;
	box-shadow: 0 2px 10px rgba(0,0,0,0.2);
	font: 14px/18px Arial,...

JavaScript

(function ($) {
    $.fn.styler = function (opt) {

        var opt = $.extend({
            wrapper: 'form',
            idSuffix: '-styler',
            filePlaceholder: 'Файл не выбран',
            fileBrowse: 'Обзор...',
            selectSearch: true,
            selectSearchLimit: 10,
            selectSearchNotFound: 'Совпадений не найдено',
            selectSearchPlaceholder: 'Поиск...',
            selectVisibleOptions: 0,
            singleSelectzIndex: '100',
            selectSmartPositioning: true
        }, opt);

        return this.each(function () {
            var el = $(this);

            function attributes() {
                var id = '',
                    title = '',
                    classes = '',
                    dataList = '';
                if (el.attr('id') !== undefined && el.attr('id') != '') id = ' id="' + el.attr('id') + opt.idSuffix + '"';
                if (el.attr('title') !== undefined && el.attr('title') != '') title = ' title="' + el.attr('title') + '"';
                if (el.attr('class') !== undefined && el.attr('class') != '') classes = ' ' + el.attr('class');
                var data = el.data();
                for (var i in data) {
                    if (data[i] != '') dataList += ' data-' + i + '="' + data[i] + '"';
                }
                id += dataList;
                this.id = id;
                this.title = title;
                this.classes = classes;
            }

            // checkbox
            if (el.is(':checkbox')) {
                el.each(function () {
                    if (el.parent('div.jq-checkbox').length < 1) {

                        function checkbox() {

                            var att = new attributes();
                            var checkbox = $('<div' + att.id + ' class="jq-checkbox' + att.classes + '"' + att.title + '><div class="jq-checkbox__div"></div></div>');

                            // прячем оригинальный чекбокс
                           ...