FONT SELECT

dabblet.css

    /**
    *FONT UI WINDOW
    */
    
    html,body {
    height: 100%;
    overflow: hidden;
    }
    
    body {
    background: url('http://f.cl.ly/items/3s223y1z1E0V3o3Y0P3L/glasswall-by-louis-bullock.png');
    
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    background-size: 100% 100%;
    font: 14px/20px Helvetica Neue, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-shadow: 0 0 1px rgba(0,0,0,0.01);
    -webkit-text-stroke: 1px transparent;
    text-rendering: optimizeLegibility;
    }
    
    /* WINDOW */
    
    .window {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -83px;
    margin-top: -83px;
    display: inline-block;
    width: 158px;
    height: 164px;
    border: 1px solid #030103;
    
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background-color: #323232;
    
    -webkit-box-shadow: inset 0 1px 0px rgba(255, 255, 255, 0.179), 0 1px 0px rgba(26, 26, 26, 0.08), 0 22px 70px 4px rgba(5, 10, 15, 0.56);
    -moz-box-shadow: inset 0 1px 0px rgba(255, 255, 255, 0.179), 0 1px 0px rgba(26, 26, 26, 0.08), 0 22px 70px 4px rgba(5, 10, 15, 0.56);
    box-shadow: inset 0 1px 0px rgba(255, 255, 255, 0.179), 0 1px 0px rgba(26, 26, 26, 0.08), 0 22px 70px 4px rgba(5, 10, 15, 0.56);
    }
    
    .window .container {
    padding: 8px 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    }
    
    /* ANIMATIONS */
    .title a.close, a.button, .fontsize {
    -webkit-transition: .2s;
    -moz-transition: .2s;
    -ms-transition: .2s;
    -o-transition: .2s;
    transition: .2s;
    }
    /* TITLE */
    
    .title {
    padding: 6px 5px 6px 11px;
    height: 18px;
    
    -webkit-border-radius: 2px 2px 0 0;
    -moz-border-radius: 2px 2px 0 0;
    border-radius: 2px 2px 0 0;
    
    -webkit-box-shadow: inset 0 1px 0px rgba(255, 255, 255, 0.179);
    -moz-box-shadow: inset 0 1px 0px rgba(255, 255, 255, 0.179);
    box-shadow: inset 0 1px 0px rgba(255, 255, 255, 0.179);
    border-bottom: 1px solid #020003;
    
    background-image: -webkit-linear-gradient(top, #363636, #202020);
    background-image: -moz-linear-gradient(top, #363636, #202020);
    background-image: -o-linear-gradient(top, #363636, #202020);
    background-image: -ms-linear-gradient(top, #363636, #202020);
    background-image: linear-gradient(top, #363636, #202020);
    }
    
    .title h1, a.close, a.button, .fontsize {
    font: normal normal 11px/20px "Lucida Grande", "Lucida Sans Unicode", sans-serif;
    color: #fff;
    text-shadow: 0 1px black;
    }
    
    .title h1 {
    float:left;
    }
    
    a.close {
    color:#AFAFAF;
    font-size:7px;
    background:#202020;
    border-radius:10px;
    height:18px;
    width:18px;
    float:right;
    line-height:18px;
    text-align:center;
    box-shadow:inset 0px 0px 0px 1px rgba(0, 0, 0, 0.25), 0px 1px 0px 0px rgba(255,255,255,0.06);
    }
    
    a.close:hover {
    background:#252525;
}

    a.close:active {
    background:#1d1d1d;
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
}
    
    /* BUTTONS */
    
    a {
    text-decoration:none;
    outline:none;
    }
    
    a.button { 
    cursor: pointer;
    border: 1px solid #020003;
    background-color: #373737;
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.0) 5%, rgba(0, 0, 0, 0.34) 88%);
    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.0) 5%, rgba(0, 0, 0, 0.34) 88%);
    background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.0) 5%, rgba(0, 0, 0, 0.34) 88%);
    background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.0) 5%, rgba(0, 0, 0, 0.34) 88%);
    background-image: linear-gradient(top, rgba(0, 0, 0, 0.0) 5%, rgba(0, 0, 0, 0.34) 88%);
    }
    a.button, .fontsize {
    font: normal normal 12px/20px "Times New Roman", serif;
    padding:6px 0 4px 0;
    display:block;
    text-align:center;
    float:left;
    
    border-right:none;
    
    -webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.12), inset -1px 0px 0px rgba(255, 255, 255, 0.075),inset 1px 0px 0px rgba(255, 255, 255, 0.075);
    -moz-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.12), inset -1px 0px 0px rgba(255, 255, 255, 0.075),inset 1px 0px 0px rgba(255, 255, 255, 0.075);
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.12), inset -1px 0px 0px rgba(255, 255, 255, 0.075),inset 1px 0px 0px rgba(255, 255, 255, 0.075);
    }
    
    a.button.bold {
    font-weight:bold;
    width:30px;
    -webkit-border-radius: 3px 0 0 3px;
    -moz-border-radius: 3px 0 0 3px;
    border-radius: 3px 0 0 3px;
    
    
    -webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.12), inset -1px 0px 0px rgba(255, 255, 255, 0.075),inset 0px 0px 0px rgba(255, 255, 255, 0.075);
    -moz-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.12), inset -1px 0px 0px rgba(255, 255, 255, 0.075),inset 0px 0px 0px rgba(255, 255, 255, 0.075);
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.12), inset -1px 0px 0px rgba(255, 255, 255, 0.075),inset 0px 0px 0px rgba(255, 255, 255, 0.075);
    }
    
    a.button.italic {
    font-style:italic;
    width:29px;
    }
    
    a.button.underline {
    text-decoration:underline;
    width:28px;
    }
    
    a.button:hover, .fontsize:hover {
    background-color: #414141;
    }
    
    a.button:active, .fontsize:active {
    background-color: #303030;
    box-shadow:inset 0px 1px 7px rgba(0, 0, 0, 0.5);
    
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0.17) 88%);
    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0.17) 88%);
    background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0.17) 88%);
    background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0.17) 88%);
    background-image: linear-gradient(top, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0.17) 88%);
    
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
    }

    /* FONTSIZE */
    .fontsize {
    width:48px;
    height:32px;
    -webkit-appearance:none;
    cursor: pointer;
    border: 1px solid #020003;
    background-color: #373737;
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.0) 5%, rgba(0, 0, 0, 0.34) 88%), url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAeCAYAAAAl+Z4RAAAAZ0lEQVQ4y2P4//8/LwMDA5D6z0AOZhg1YNSAUQMIGsAMxOf/I8AWkgwAAsa+vr4ckMS/f//+tra2xpDsBSAQevDgwbGbN2/uA7L5yAqDgoKCoPz8fB+yAxEIuIGYazQhjRowagB+DADUA1MtjV1aLAAAAABJRU5ErkJggg==) 30px 0;
    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.0) 5%, rgba(0, 0, 0, 0.34) 88%);
    background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.0) 5%, rgba(0, 0, 0, 0.34) 88%);
    background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.0) 5%, rgba(0, 0, 0, 0.34) 88%);
    background-image: linear-gradient(top, rgba(0, 0, 0, 0.0) 5%, rgba(0, 0, 0, 0.34) 88%);
    background-repeat:no-repeat;
    
    -webkit-border-radius: 0 3px 3px 0;
    -moz-border-radius: 0 3px 3px 0;
    border-radius: 0 3px 3px 0;
    
    border-right: 1px solid #020003;
    padding:4px 0 4px 9px;
    
    -webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.12), inset 1px 0px 0px rgba(255, 255, 255, 0.075),inset 0px 0px 0px rgba(255, 255, 255, 0.075);
    -moz-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.12), inset 1px 0px 0px rgba(255, 255, 255, 0.075),inset 0px 0px 0px rgba(255, 255, 255, 0.075);
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.12), inset 1px 0px 0px rgba(255, 255, 255, 0.075),inset 0px 0px 0px rgba(255, 255, 255, 0.075);
    }
    
    .fontsize:focus {
    outline:none;
    }

/* FONT SELECT */

.fontselect {
    width:48px;
    height:32px;
    -webkit-appearance:none;
    cursor: pointer;
    border: 1px solid #020003;
    background-color: #373737;
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.0) 5%, rgba(0, 0, 0, 0.34) 88%) 30px 0, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAeCAYAAAAl+Z4RAAAAZ0lEQVQ4y2P4//8/LwMDA5D6z0AOZhg1YNSAUQMIGsAMxOf/I8AWkgwAAsa+vr4ckMS/f//+tra2xpDsBSAQevDgwbGbN2/uA7L5yAqDgoKCoPz8fB+yAxEIuIGYazQhjRowagB+DADUA1MtjV1aLAAAAABJRU5ErkJggg==) 30px 0;
    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.0) 5%, rgba(0, 0, 0, 0.34) 88%);
    background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.0) 5%, rgba(0, 0, 0, 0.34) 88%);
    background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.0) 5%, rgba(0, 0, 0, 0.34) 88%);
    background-image: linear-gradient(top, rgba(0, 0, 0, 0.0) 5%, rgba(0, 0, 0, 0.34) 88%);
    background-repeat:no-repeat;
    
    -webkit-border-radius: 0 3px 3px 0;
    -moz-border-radius: 0 3px 3px 0;
    border-radius: 3px;
    
    border-right: 1px solid #020003;
    padding:4px 0 4px 9px;
    
    -webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.12), inset 1px 0px 0px rgba(255, 255, 255, 0.075),inset 0px 0px 0px rgba(255, 255, 255, 0.075);
    -moz-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.12), inset 1px 0px 0px rgba(255, 255, 255, 0.075),inset 0px 0px 0px rgba(255, 255, 255, 0.075);
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.12), inset 1px 0px 0px rgba(255, 255, 255, 0.075),inset 0px 0px 0px rgba(255, 255, 255, 0.075);
    }
    
    .fontselect:focus {
    outline:none;
}


/* LAYOUT */
.row {
    float:left;
    margin-bottom:10px;
}

dabblet.html

<div class="window drag">
    <div class="title">
        <h1>Font</h1>
        <a href="#" class="close" alt="close">X</a>
    </div>
    <div class="container">
        <div class="row">
        <a href="#" class="button bold" alt="bold">B</a>
        <a href="#" class="button italic" alt="italic">I</a>
        <a href="#" class="button underline" alt="underline">U</a>
        <select name="fontsize" type="dropdown" class="fontsize">
        <option value="1">6</option>
        <option value="2">7</option>
        <option value="3">8</option>
        <option value="4">9</option>
        <option value="5">10</option>
        <option value="6">11</option>
        <option value="7">12</option>
        <option value="8">14</option>
        <option value="9" label="15" selected="selected"></option>
        <option value="10">16</option>
        <option value="11">18</option>
        <option value="12">21</option>
        <option value="13">24</option>
        <option value="14">36</option>
        <option value="15">48</option>
        <option value="16">60</option>
        <option value="17">72</option>
        </select>
        </div>
        <div class="row">
         <select name="fontselect" type="dropdown" class="fontselect">
        <option value="1">Helvetica Neue</option>
        <option value="2" label="Lucida Grande" selected="selected"></option>
        <option value="3" disabled>Comic Sans</option>
        </select>
            
            <!--restofbuttonshere-->
        </div>
    </div>
</div>
<img src="http://dribbble.com/system/assets/593/113816/screenshots/582430/fonts_dribbble_v2.png" class="drag" style="z-index:-2;">

settings.json

{"view":"separate","fontsize":"80","seethrough":"","prefixfree":"","page":"all"}