JSFiddle - React, Tailwind, and code Playground

by shapeshifta

HTML

<div class="skinned-select"><span class="fake-select"></span>

    <select class="select">
        <option selected="selected" value="#relevance">Unsere Empfehlung</option>
        <option value="#price">Preis aufsteigend</option>
        <option value="#category">Sterne</option>
        <option value="#overall_liking">Beliebtheit</option>
    </select>
</div>
<div class="skinned-select"><span class="fake-select"></span>

    <select class="select">
        <option value="#relevance">Unsere Empfehlung</option>
        <option value="#price">Preis aufsteigend</option>
        <option selected="selected" value="#category">Sterne</option>
        <option value="#overall_liking">Beliebtheit</option>
    </select>
</div>

SCSS

.skinned-select {
    position: relative;
    width: 160px;
    padding: 5px;
    .select {
        opacity : 0;
        filter: alpha(opacity=0);
        width: 100%;
        height: 20px;
        box-sizing: border-box;
    }
    .fake-select {
        width: 100%;
        height: 20px;
        position: absolute;
        z-index: 0;
        text-align: right;
        right: 5px;
        text-decoration: underline;
    }
    .select-icon {
        display: inline-block;
        margin-left: 5px;
    }
}

JavaScript

(function (factory) {
    'use strict';
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module depending on jQuery.
        define(['jquery'], function (jQuery) {
            return factory(jQuery);
        });
    } else {
        // No AMD. Register plugin with global jQuery object.
        factory(jQuery);
    }
}(function ($) {
    'use strict';

    /**
     * @module jquery-plugin
     * @return {jQuery}
     */
    var pluginName = 'boomselecta',
        defaults = {
            icon: '<i class="icons icon-arrow select-icon" />',
            select: 'select.select',
            fakeSelect: 'span.fake-select'
        };

    /**
     * __BoomSelecta__
     *
     * @class BoomSelecta
     * @constructor
     * @param element {Object} element from selection
     * @param options {Object} plugin options
     * @chainable
     */
    function BoomSelecta(element, options) {
        this.element = element;
        this.options = $.extend({}, defaults, options);
        this.init();
    }

    BoomSelecta.prototype = {
        /**
         * inits BoomSelecta
         *
         * @method init
         */
        init: function () {
            var that = this,
                $element = $(that.element),
                options = that.options;

            $element
                .on('change boomselecta.update', options.select, function () {
                    $element
                        .find(options.fakeSelect)
                        .html($(this).find('option:selected').text().trim() + options.icon);
                })
                .find(options.select)
                .trigger('boomselecta.update');
        }
    };

    $.fn[pluginName] = function (options) {
        return this.each(function () {
            if (!$.data(this, "plugin_" + pluginName)) {
                $.data(this, "plugin_" + pluginName,
                    new BoomSelecta(this, options));
            }
        });
   ...