Custom Select w/ Radial Gradient

by kpowz

HTML

<div class="style-select">
    <select id="select-cat" onchange="changeCategory(this)">
        <option id="opt1" value="shop" selected>&nbsp&nbsp Shop</option>
        <option id="opt2" value="dine">&nbsp&nbsp Dine</option>
        <option id="opt3" value="nightlife">&nbsp&nbsp Nightlife</option>
    </select>
</div>


<!--TODO: 
// MS HIGHLIGHTING (REMOVE)
// ADD SECOND BACKGROUND WITH CARROT IMAGE TO MORE STRONGLY INDICATE DROPDOWN -->

CSS

select {
    background: 
       -webkit-radial-gradient(
        8px 17px, 
        circle closest-side
        , #40AD48 75%, white 10%);
    background: 
       -moz-radial-gradient(
        8px 17px, 
        circle closest-side
        , #40AD48 75%, white 10%);
    background: 
       -ms-radial-gradient(
        8px 17px, 
        circle closest-side
        , #40AD48 75%, white 10%);
}

select.shop {
    background: 
       -webkit-radial-gradient(
        8px 17px, 
        circle closest-side
        , #40AD48 75%, white 10%);
    background: 
       -moz-radial-gradient(
        8px 17px, 
        circle closest-side
        , #40AD48 75%, white 10%);
    background: 
       -ms-radial-gradient(
        8px 17px, 
        circle closest-side
        , #40AD48 75%, white 10%);
    
}

select.dine {
    background: 
       -webkit-radial-gradient(
        8px 17px, 
        circle closest-side
        , #EC008B 75%, white 10%);
    background: 
       -moz-radial-gradient(
        8px 17px, 
        circle closest-side
        , #EC008B 75%, white 10%);
     background: 
       -ms-radial-gradient(
        8px 17px, 
        circle closest-side
        , #EC008B 75%, white 10%);
}
select.nightlife {
    background: 
       -webkit-radial-gradient(
        8px 17px, 
        circle closest-side
        , #00ADEF 75%, white 10%);
    background: 
       -moz-radial-gradient(
        8px 17px, 
        circle closest-side
        , #00ADEF 75%, white 10%);
     background: 
       -ms-radial-gradient(
        8px 17px, 
        circle closest-side
        , #00ADEF 75%, white 10%);
}

.style-select select {
    width: 268px;
    padding: 5px;
    font-size: 16px;
    line-height: 1.5;
    border-radius: 0;
    height: 36px;
    -webkit-appearance: none;
    -moz-appearance: none !important;
    text-overflow: '';
    text-indent: 0.1px;
    appearance: none;
}

.style-select select::-ms-expand {
    display: none;
}

JavaScript

function changeCategory(sender){
   sender.className = sender.value; 
}