N1 dropdown

by Andrew Dunai

HTML

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:100,500/style.css">
<div class="select"> <!-- tabindex="1" -->
    <div class="in">
    <input type="radio" name="count" value="0" checked="checked" />
    <div class="option">
        <label data-title="Select something">Select something</label>
    </div>
    <input type="radio" name="count" value="1" id="r1" />
    <div class="option">
        <label data-title="Option 1" for="r1">Option 1</label>
    </div>
    <input type="radio" name="count" value="2" id="r2" />
    <div class="option">
        <label data-title="Option 2" for="r2">Option 2</label>
    </div>
    <input type="radio" name="count" value="3" id="r3" />
    <div class="option">
        <label data-title="Option 3" for="r3">Option 3</label>
    </div>
    <input type="radio" name="count" value="4" id="r4" />
    <div class="option">
        <label data-title="Option 4" for="r4">Option 4</label>
    </div>
    <input type="radio" name="count" value="5" id="r5" />
    <div class="option">
        <label data-title="Option 5" for="r5">Option 5</label>
    </div>
    </div>
</div>

CSS

body { background: #24333A; color: #D92C67; font-family: Roboto; font-size: 18px; font-weight: 500; padding: 20px; }
h1 { margin: 0 0 20px; padding: 0; }

.select {
    max-height: 2rem;
    transition: 0.1s max-height linear;
    overflow-y: hidden;
    position: relative;
}

.select .option, .select .option label {
    line-height: 2rem;
    height: 2rem;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.select .option {
    display: block;
    width: 100%;
    background: rgba(255, 255, 255, 0.1);
    transition: 0.25s background linear;
}

.select .option label {
    display: block;
    padding: 0 0.5rem;
}

/*.select:focus {
    pointer-events: none;
}*/

/* .select {
    height: 2rem;
    position: relative;
    overflow: hidden;
}
 */
.select:hover {
    max-height: 8rem;
/*    transition: overflow-y 0.1s linear;
    transition-delay: 0s;*/
}

.select .in {
    overflow-y: auto;
    max-height: 6rem;
    margin-top: 2rem;
}

.select input {
    display: none;
}

.select:hover input:not(:first-child):checked + .option {
    background: #01CBE1;
}

/*.select:not(:hover) input:first-child:not(:checked) + .option {
    display: none;
}*/

.select input:first-child + .option {
    height: 0;
    overflow: hidden;
}

.select input:first-child + .option {
    pointer-events: none;
}

.select .option label:after {
    position: absolute;
    content: attr(data-title);
    top: 0;
    left: 0;
    right: 0;
    opacity: 0;
    padding: 0 0.5rem;
    background: rgba(255, 255, 255, 0.05);
}

.select input:checked + .option label:after {
    opacity: 1;
}