Huinya2

by AntowaKartowa

HTML

<div class="select">
    <div class="select-button">
        <div class="select-text"><label for="dropList">Select...</label></div>
        <div class="select-arrow"><label for="dropList">&nbsp;</label></div>
    </div>
    <input type="checkbox" name="dropList" class="drop" id="dropList">
    <div class="select-dropdown">
        <div class="select-elem"><a href="abc" class="select-link"><label for="dropList">item 1</label></a></div>
        <div class="select-elem"><a href="bcd" class="select-link"><label for="dropList">item 2</label></a></div>
        <div class="select-elem"><a href="cde" class="select-link"><label for="dropList">item 3</label></a></div>
        <div class="select-elem"><a href="def" class="select-link"><label for="dropList">item 4</label></a></div>
        <div class="select-elem"><a href="efg" class="select-link"><label for="dropList">item 5</label></a></div>
        <div class="select-elem"><a href="fgh" class="select-link"><label for="dropList">item 6</label></a></div>
        <div class="select-elem"><a href="ghi" class="select-link"><label for="dropList">item 7</label></a></div>
    </div>
</div>

CSS

.select {
    position: relative;
    display: inline-block;
    border: 1px solid #d9d9d9;
}

.select-button {
    overflow: hidden;
}

.select-text,
.select-arrow {
    float: left;
}

.select-button label {
    display: block;
    padding: 10px 0  10px 10px;
}

.select-arrow label {
    width: 25px;
    cursor: pointer;
}

.select-arrow {
    margin-left: 15px;
    border-left: 1px solid #d9d9d9;
}

.drop {
    position: absolute;
    z-index: -1;
    visibility: hidden;
}

.select-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: -1px;
    padding: 5px 10px;
    border: 1px solid #d9d9d9;
    min-width: calc(100% - 20px);
}

.drop:checked + .select-dropdown { 
    display: block;
}

.select-elem {
    padding: 5px 0;
}
.select-elem a {
    text-decoration: none;
    color: #666;
}