Custom <select>s with CSS3

by akshatha suchethan

HTML

<!--[if !IE]> --> <div class="notIE"> <!-- <![endif]-->
<span class="arrow"></span>
<select>
    <option>Apples</option>
    <option>Pineapples</option>
    <option>Chocklate</option>
    <option>Pancakes</option>
</select>
<br/><br/>



<input type="text" class="textbox" />
<!--[if !IE]> --></div> <!-- <![endif]-->

CSS

.notIE {
    position: relative;
    display: inline-block;
}

select {
    display: inline-block;
    height:30px;
    width: 150px;
    padding: 2px 10px 2px 2px;
    outline: none;
    color: #74646e;
    border: 1px solid #C8BFC4;
    border-radius: 4px;
    box-shadow: inset 1px 1px 2px #ddd8dc;
    background: #fff; 
}

/* Select arrow styling */
.notIE .arrow {
    width: 23px;
    height: 28px;
    position: absolute;
    display: inline-block;
    top: 1px;
    right: 3px;
    background: C:\Users\suchethana\Downloads\arrow483.png right / 90%  no-repeat #fff;
    pointer-events: none;
}
input[type=text] {
    padding: 0;
    height: 30px;
    position: relative;
    left: 0;
    outline: none;
    border: 1px solid #C8BFC4;
     border-radius: 4px;
    box-shadow: inset 1px 1px 2px #ddd8dc;
    background: white;
    font-size: 16px;
}
.textbox {
   width: 150px;
    margin-right: -4px;
}