JSFiddle - React, Tailwind, and code Playground
HTML
<div class="selectboxit-container ">
<select name="cesit" class="selectboxit">
<option value="anayemek">lahmacun</option>
<option value="icecek">ayran</option>
<option value="tatli">baklava</option>
</select>
</div>
CSS
/*
* jquery.selectBoxIt.css 3.6.0
* Author: @gregfranko
*/
/*
Common CSS Properties
---------------------
These properties will be applied to any themes that you use
*/
/* SelectBoxIt container */
.selectboxit-container {
position: relative;
display: inline-block;
vertical-align: top;
}
/* Styles that apply to all SelectBoxIt elements */
.selectboxit-container * {
font: 14px Helvetica, Arial;
/* Prevents text selection */
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: -moz-none;
ms-user-select: none;
-o-user-select: none;
user-select: none;
outline: none;
white-space: nowrap;
}
/* Button */
.selectboxit-container .selectboxit {
width: 220px;
/* Width of the dropdown button */
cursor: pointer;
margin: 0;
padding: 0;
border-radius: 6px;
overflow: hidden;
display: block;
position: relative;
}
/* Height and Vertical Alignment of Text */
.selectboxit-container span, .selectboxit-container .selectboxit-options a {
height: 30px;
/* Height of the drop down */
line-height: 30px;
/* Vertically positions the drop down text */
display: block;
}
/* Focus pseudo selector */
.selectboxit-container .selectboxit:focus {
outline: 0;
}
/* Disabled Mouse Interaction */
.selectboxit.selectboxit-disabled, .selectboxit-options .selectboxit-disabled {
opacity: 0.65;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
cursor: default;
}
/* Button Text */
.selectboxit-text {
text-indent: 5px;
overflow: hidden;
text-overflow: ellipsis;
float: left;
}
.selectboxit .selectboxit-option-icon-container {
margin-left: 5px;
}
/* Options List */
.selectboxit-container .selectboxit-options {
-moz-box-sizing: border-box;
box-sizing: border-box;
min-width: 100%;
/* Minimum Width of the dropdown list box options */
...
JavaScript
/*! jquery.selectBoxIt - v3.6.0 - 2013-06-25
* http://www.selectboxit.com
* Copyright (c) 2013 Greg Franko; Licensed MIT*/
// Immediately-Invoked Function Expression (IIFE) [Ben Alman Blog Post](http://benalman.com/news/2010/11/immediately-invoked-function-expression/) that calls another IIFE that contains all of the plugin logic. I used this pattern so that anyone viewing this code would not have to scroll to the bottom of the page to view the local parameters that were passed to the main IIFE.
;
(function (selectBoxIt) {
//ECMAScript 5 Strict Mode: [John Resig Blog Post](http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/)
"use strict";
// Calls the second IIFE and locally passes in the global jQuery, window, and document objects
selectBoxIt(window.jQuery, window, document);
}
// Locally passes in `jQuery`, the `window` object, the `document` object, and an `undefined` variable. The `jQuery`, `window` and `document` objects are passed in locally, to improve performance, since javascript first searches for a variable match within the local variables set before searching the global variables set. All of the global variables are also passed in locally to be minifier friendly. `undefined` can be passed in locally, because it is not a reserved word in JavaScript.
(function ($, window, document, undefined) {
// ECMAScript 5 Strict Mode: [John Resig Blog Post](http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/)
"use strict";
// Calling the jQueryUI Widget Factory Method
$.widget("selectBox.selectBoxIt", {
// Plugin version
VERSION: "3.6.0",
// These options will be used as defaults
options: {
// **showEffect**: Accepts String: "none", "fadeIn", "show", "slideDown", or any of the jQueryUI show effects (i.e. "bounce")
"showEffect": "none",
// **showEffectOptions**: Accepts an object literal. All of the available properties are...