ADA jQuery UI Select

by Deniss Samoilov

HTML

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<div id="after">
  <h1>Before</h1>
</div>
<hr />
<select name="select" id="select">
  <option value="lan1">Test Lang1</option>
  <option value="lan2">Test Lang2</option>
  <option value="lan3">Test Lang3</option>
  <option value="lan4">Test Lang4</option>
  <option value="lan5">Test Lang5</option>
</select>
<hr />
<div id="after">
  <h1>After</h1>
</div>

CSS

.ui-menu .ui-state-focus,
.ui-menu .ui-state-active {
	outline: 1px solid red;
}
.ui-selectmenu-menu {
	position: absolute;
	display: none;
}
.ui-selectmenu-menu .ui-menu {
	overflow: auto;
	overflow-x: hidden;
	/* padding-bottom: 1px; */
}
.ui-selectmenu-open {
	display: block;
}
.ui-selectmenu-button{
    width:200px !important;
}

JavaScript

$( "#select" ).selectmenu();

$.widget( "custom.iconselectmenu", $.ui.selectmenu, {
    _renderItem: function( ul, item ) {
        var li = $( "<li>", { text: item.label } );
        
        /* if ( item.disabled ) {
            li.addClass( "ui-state-disabled" );
        }
        
        $( "<span>", {
            style: item.element.attr( "data-style" ),
            "class": "ui-icon " + item.element.attr( "data-class" )
        })
        .appendTo( li ); */
        
        return li.appendTo( ul );
    },
});