Styled Select

Styling Select

by rulokc

HTML

<label class="styled-select">
    <select>
        <option>Option</option>
        <option>Option</option>
        <option>Option</option>
        <option>Option</option>
        <option>Option</option>
    </select>
</label>

CSS

label.styled-select {
    width: 100px;
    overflow: hidden;
    position: relative;
    display: block;
}
select {
    width: 100px;
    cursor: pointer;
    border: 1px solid #ccc;
    moz-appearance: none;
    webkit-appearance: none;
    ms-appearance: none;
    appearance: none;
    
}
select:focus {
    outline: 0;
}
label.styled-select:before {
    content: '';
    position: absolute;
    top: 3px; right: 1px; width: 20px; height: 18px;
    background: #fff;
    pointer-events: none;
}
label.styled-select:after {
    content: '';
    position: absolute;
    top: 7px; right: 5px; width: 0; height: 0;
    border-top: 10px solid #333;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    pointer-events: none;
}