select box styling

by Richard Hunter

HTML

<div class='wrapper'>
    <select class="foo">
        <option>alpha</option>
        <option>beta</option>
    </select>
</div>

CSS

.wrapper {
    
    height : 48px;
    width : 50%;
    position : relative;
    border : solid 1px red;
}
.foo {
    position : absolute;
    left : 0;
    top : 0;
    border : solid 1px blue;
    background : transparent;
    opacity : 1;
    border-radius : 0;
    height : 100%;
    width : 100%;
    z-index : 1;
    font-size : 16px;
    color : #666;
    padding  : 0 12px;
    -webkit-appearance : none;
}
.wrapper:after {
    
    content : '';
    display : block;
    width : 48px;
    height : 48px;
    background : pink;
    position : absolute;
    right : 0;
    top : 0;
    background-image : url(http://192.168.1.108:1314/images/svg/down_arrow.svg);
    background-repeat : no-repeat;
    background-position : center;
    background-size : 40%;
    
    
    
}