Select Boxes

HTML

<div class="select-box">
    <select>
        <option>Test 1</option>
        <option>Test 2</option>
    </select>    
</div>

<div class="select-box2">
    <select>
        <option>Test 1</option>
        <option>Test 2</option>
    </select>    
</div>

<div class="select-box3">
    <select>
        <option>Test 1</option>
        <option>Test 2</option>
    </select>    
</div>
<div class="select-box4">
    <div class="overlay"></div> 
    <select>
        <option>Test 1</option>
        <option>Test 2</option>
    </select>
   
</div>

CSS

.select-box select {
    background: none;
    -webkit-appearance: none;
    width: 130px;
    height: 30px;
    border: 0;
    line-height: 1;
    color: #fff;
    border-radius: 0;
    -webkit-border-radius: 0;
}
.select-box:after {
content: "<";
color: #fff;
}

.select-box option {
    color: #fff;
}
.select-box {
    background: black;
    border: 2px solid grey;
    width: 100px;
    height: 30px;
    overflow: hidden;
}

.select-box2 select {
    background: #c6e1fc;
    -webkit-appearance: none;
    width: 130px;
    height: 30px;
    border: 1px solid #005DAB;
    line-height: 1;
    color: #505050;
    border-radius: 0;
    padding: .5em;
}
.select-box2 select:after {
content: "<";
}
.select-box2 {
    margin-top: 8px;
}
.select-box3 select {
    background: #BEE3FF;
    width: 130px;
    height: 30px;
    border: 0;
    line-height: 1;
    color: #000;
    border-radius: 0;
    padding: .5em;
}
.select-box3 {
    margin-top: 8px;
}

.select-box4 select {
    background: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 130px;
    height: 30px;
    line-height: 1;
    color: #000;
    border-radius: 0;
    border: 0;
    padding: .5em;
    z-index: 2;
    position: absolute;
    top: 0;
     left: 0;
}
.select-box4 {
    margin-top: 8px;
    background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 0%, #c6e1fc 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#c6e1fc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffffff 0%,#c6e1fc 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffffff 0%,#c6e1fc 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffffff 0%,#c6e1fc 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ffffff 0%,#c6e1fc 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#c6e1fc',GradientType=0...