.select-div {
    display:flex;
    flex-direction: column;
    position:relative;
    width:105px;
    height:20px;
}

.select-div .option {
    padding:0 30px 0 5px;
    min-height:20px;
    display:flex;
    align-items:center;
    background:#eee;
    border-top:#eee solid 1px;
    position:absolute;
    top:0;
    width: 100%;
    pointer-events:none;
    order:2;
    z-index:1;
    transition:background .4s ease-in-out;
    box-sizing:border-box;
    overflow:hidden;
    white-space:nowrap;
}

.select-div .option:hover {
    background:#ccc;
}

.select-div:focus {
    overflow-y: scroll;
    height: 80px;
    position: absolute;
    z-index: 10;
}

/* width */
.select-div:focus::-webkit-scrollbar {
    display: none;
    width: 5px;
}

/* Track */
.select-div:focus::-webkit-scrollbar-track {
    display: none;
    box-shadow: inset 0 0 5px yellow;
    border-radius: 10px;
}

/* Handle */
.select-div:focus::-webkit-scrollbar-thumb {
    display: none;
    background: red;
    border-radius: 10px;
}

/* Handle on hover */
.select-div:focus::-webkit-scrollbar-thumb:hover {
    display: none;
    background: pink;
}

.select-div:focus .option {
    position: relative;
    pointer-events: all;
}

.select-div input {
    opacity:0;
    position:absolute;
    left:-99999px;
}

.select-div input:checked + label {
    order: 1;
    z-index:2;
    background:#EEEEEE;
    border-top:none;
    position:relative;
}

.select-div input:checked + label:after {
    content:'';
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid black;
    position:absolute;
    right:10px;
    top:calc(50% - 2.5px);
    pointer-events:none;
    z-index:3;
}

.select-div input:checked + label:before {
    position:absolute;
    right:0;
    height: 40px;
    width: 40px;
    content: '';
    background:#eee;
}