JSFiddle - React, Tailwind, and code Playground

by damyanpetev

HTML

<script src="http://igniteui.com/js/modernizr.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<button >
  Select
  <select name="color" id="color">
    <option value=""></option>
      <option value="red">red</option>
      <option value="yellow">yellow</option>
    </select>
</button>

CSS

.ui-selectmenu-button span.ui-selectmenu-text {
  padding: 0!important;
}

.ui-button .ui-button-text {
    display: inline!important;
    vertical-align: top!important;
    padding: 2px 6px 3px!important;
}

JavaScript

$(function () {
	$( "button" ).eq( 0 ).button();
  $( "#color" ).selectmenu({
  			width: 30,
        height: 15,
       change: function( event, data ) {
         $( "#color" ).val("");
         $( "#color" ).selectmenu("refresh");
       },
       open: function( event, data ) {
         $( "#color" ).selectmenu( "menuWidget" ).children("li").eq(0).hide();
       },
     });
});