Untitled

dabblet.css

body {
    background-color: #fff;
    color: #333;
    font-family: Tahoma, sans-serif;
}

.content {
    margin: 10px;
}

.select-input,
.select-list {
    margin: 0;
    border: 1px solid #ccc;
    padding: 4px;
}

.select-input {
    width: 300px;
}

.select-list {
    position: absolute;
    box-shadow: 2px 2px 4px #ccc;
    margin: 0;
    padding: 0;
    list-style: none;
    width: 309px;
    opacity: 0.90;
    visibility: hidden;
    z-index: 1
}

.select-input:focus + .select-list {
    visibility: visible;    
}

.select-item {
    background-color: #fff;
    border-bottom: 1px solid #ccc;
    padding: 4px 8px;
    transition: background-color 400ms;
    transition: color 400ms;    
}

.select-item:hover {
    background-color: #888;
    color: #fff;
    cursor: pointer;
}

.select-item:last-child {
    border-bottom-width: 0px;    
}

.right {
    float: right;
}

.small {
    font-size: 10px;   
}

dabblet.html

<div class="content">
    <input type="text" class="select-input">
    <ul class="select-list">
        <li class="select-item">
            One
            <span class="small right">1</span>
        </li>
        <li class="select-item">
            Two
            <span class="small right">2</span>
        </li>
        <li class="select-item">
            Three
            <span class="small right">3</span>
        </li>
    </ul>
</div>
<p class="content">
    Crockford says 'use strict';
</p>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}