Basic select box styling method

HTML

<div class="select">
    <select class="select-box">
        <option value="val1">1</option>
        <option value="val2">2</option>
        <option value="val3">3</option>
        <option value="val4">4</option>
    </select>
    <div class="select-value"></div>
</div>
<button>toggle</button>

CSS

.select {
    width: 300px;
    margin: 0 auto;
    border: 1px solid #ccc;
    
    position: relative;
    
    background: #eee;
}
.select-box {
    padding: 0;
    width: 100%;
    
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    
    opacity: 0;
}
.select-value {
    padding: 0 0.25em;
    height: 1.4em;
    
    line-height: 1.4em; 
}
.select.is-disabled {
    opacity: 0.5;
}
}