JSFiddle - React, Tailwind, and code Playground

by Cerlin ST

HTML

<link rel="stylesheet" href="http://brianreavis.github.io/selectize.js/css/selectize.bootstrap3.css">
<script src="http://brianreavis.github.io/selectize.js/js/selectize.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<select id="test" placeholder="Choose a language...">
    <option value="">Any Language</option>
    <option value="addnew">Add New</option>
    <option value="javascript">Javascript</option>
    <option value="ruby">Ruby</option>
    <option value="python">Python</option>
</select>

CSS

@import url(http://fonts.googleapis.com/css?family=Questrial);
 @import url(http://weloveiconfonts.com/api/?family=zocial);

/* zocial */
[class*="zocial-"]:before {
    font-family:'zocial', sans-serif;
}
* {
    font-family: Questrial !important;
}
body {
    padding: 40px;
    background: white;
}

JavaScript

Selectize.define( 'clear_selection', function ( options ) {
    var self = this;

    self.plugins.settings.dropdown_header = {
        title: 'Add New'
    };
    this.require( 'dropdown_header' );

    self.setup = (function () {
        var original = self.setup;

        return function () {
            original.apply( this, arguments );
            this.$dropdown.on( 'mousedown', '.selectize-dropdown-header', function ( e ) {
                self.setValue( 'Add New');
            });
        }
    })();
});

$('#test').selectize({
    create: false,
    dropdownParent: 'body',
});