selectBoxIt

by firegroove

HTML

<script src="https://raw.github.com/gfranko/jquery.selectBoxIt.js/master/src/javascripts/jquery.selectBoxIt.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://gregfranko.com/jquery.selectBoxIt.js/css/jquery.selectboxit.cs"></script>
<select class="small-dropdown">
    <option>1</option>
    <option>2</option>
    <option>3</option>
     <option>4</option>
    <option>5</option>
    <option>6</option>
     <option>7</option>
    <option>8</option>
    <option>9</option>
     <option>10</option>
    <option>11</option>
    <option>12</option>
     <option>13</option>
    <option>14</option>
    <option>15</option>
    
</select>
<select>
    <option>Long Text</option>
    <option>Very Long Text</option>
    <option>Very Very Long Text</option>
     <option>Very Very Long Long Text</option>
    <option>Very Very Very Very Very Very Long Long Long Long Text</option>
</select>
<select>
    <option>Hello</option>
     <option>World</option>
     <option>Foo</option>
     <option>Bar</option>
</select>

CSS

@import url('https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/bootstrap.min.css');
 
/*  @import url('http://gregfranko.com/jquery.selectBoxIt.js/css/jquery.selectboxit.css');
 */
 
body {
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
font-size: 12px;
line-height: 16px;
color: #daa520;
}

.small-dropdown.selectboxit, .small-dropdown.selectboxit + .selectboxit-options{
    width: 50px;
    min-width: 50px;    
}

JavaScript

$(function() {
    $('select').selectBoxIt();
});