JSFiddle - React, Tailwind, and code Playground

by HYEONGJINKIM

HTML

<script src="http://domfam.cafe24.com/skt/js/lib/fancySelect.js"></script>
<span class="customselect">
							<select name="" id="" class="_customSelect" title="타이틀"  >
								<option value="value1">disabled</option>
								<option value="value2">disabled</option>
								<option value="value1">disabled</option>
								<option value="value2">disabled</option>
								<option value="value1">disabled</option> 
							</select>
							</span>

CSS

/* HTML5 RESET CSS Document */
/* domfam.com Team by willy | [email protected] */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address,
cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section,
summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:middle; background:transparent; -webkit-text-size-adjust:none; }
html, body { width:100%; height:100%; }
  
/* BODY 관련 색상조절 */ 
body, input, button, textarea { font-size:12px; line-height:1.5em; color:#666; font-family:"돋움", Dotum, AppleSDGothicNeo,AppleGothic,Droid Sans,Helvetica, AppleGothic, Sans-serif; }
button {background:none; padding:0; border:0 none; display:inline-block; margin:0; cursor:pointer}
h1, h2, h3, h4, h5, h6 { font-size:12px; text-align:left; font-weight:normal;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block; }
img, th, td {vertical-align:middle;}
img, fieldset, iframe { border:0 none; }
table {*position:relative; /* ie7 hide bug*/}
table, div { border-collapse: collapse; }
select, textarea { background: transparent; color: #323232; font-size: 12px; vertical-align: middle; }
textarea { overflow:auto; }
select, input, img, li { vertical-align: middle; text-align:left; }
address, caption, cite, code, dfn, em, strong, th, var ,optgroup { font-style : normal; font-weight :normal; vertical-align:middle;}
ul, li, ol { list-style-type: none;}
legend, caption { display: none; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; } 

/* LINK 관련 색상조절 */
a { margin:0; padding:0; vertical-align:middle; t}
a:link, a:visited { text-decoration:none; color: #666666; }
a:hover {...

JavaScript

// Generated by CoffeeScript 1.4.0
(function () {
    var $;

    $ = window.jQuery || window.Zepto || window.$;

    $.fn.fancySelect = function (opts) {
        var isiOS, settings;
        if (opts == null) {
            opts = {};
        }
        settings = $.extend({
            forceiOS: false,
            includeBlank: false
        }, opts);
        isiOS = !! navigator.userAgent.match(/iP(hone|od|ad)/i);
        return this.each(function () {
            var copyOptionsToList, disabled, options, sel, trigger, updateTriggerText, wrapper;
            sel = $(this);
            if (sel.hasClass('fancified') || sel[0].tagName !== 'SELECT') {
                return;
            }
            sel.addClass('fancified');
            sel.css({
                width: 1,
                height: 1,
                display: 'block',
                position: 'absolute',
                top: 0,
                left: 0,
                opacity: 0
            });
			sel.wrap('<span class="customselectouter"></span>');
			sel.wrap('<span class="customselectinner"></span>');
            wrapper = sel.parent();
            if (sel.data('class')) {
                wrapper.addClass(sel.data('class'));
            }
            wrapper.append('<div class="trigger">');
            if (!(isiOS && !settings.forceiOS)) {
                wrapper.append('<div class="options"></div>');
				wrapper.find('.options').append('<ul class="list"></ul>');
            }
            trigger = wrapper.find('.trigger');
            options = wrapper.find('.options');
            disabled = sel.prop('disabled');
            if (disabled) {
                wrapper.parents('.customselect').addClass('disabled');
            }
            updateTriggerText = function () {
                return trigger.text(sel.find(':selected').text());
            };
            sel.on('blur', function () {
                if (trigger.hasClass('open')) {					
                    return setTimeout(function ()...