JSFiddle - React, Tailwind, and code Playground
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=""></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('selectable_placeholder', function (options) {
var self = this;
options = $.extend({
placeholder: self.settings.placeholder,
html: function (data) {
return (
'<div class="selectize-dropdown-content placeholder-container">' +
'<div data-selectable class="option">' + data.placeholder + '</div>' +
'</div>');
}
}, options);
// override the setup method to add an extra "click" handler
self.setup = (function () {
var original = self.setup;
return function () {
original.apply(this, arguments);
self.$placeholder_container = $(options.html(options));
self.$dropdown.prepend(self.$placeholder_container);
self.$dropdown.on('click', '.placeholder-container', function () {
self.setValue('');
self.close();
self.blur();
});
};
})();
});
$('#test').selectize({
create: false,
dropdownParent: 'body',
plugins: {
'selectable_placeholder': {}
}
});