How can I customize a select drop-down box using CSS?
<p>I've tried a few different things but none of them work, I want to make it so that this list of drop down options has a grey color displayed behind it upon hover, however all I get is the default blue background with white text upon hover.
HTML:</p>

<pre><code>&lt;select placeholder="Category"&gt;
    &lt;option value="AllOpt"&gt;All&lt;/option&gt;
    &lt;option value="AntiquesOpt"&gt;Antiques&lt;/option&gt;
    &lt;option value="ArtsCraftsOpt"&gt;Art &amp;amp; Crafts&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p>CSS:</p>

<pre><code>.form-wrapper select { 
    position:absolute;
    width:147px;
    height:40px;
    padding:7px 5px;
    float:left;
    top:74px;
    left:963px;text-indent:3px;
    font-size:16px;
    font-family:sans-serif,arial;
    border:2px solid #f9f9f9;
    background:#f9f9f9;
    font-weight:bold;
    color:dodgerblue;
} .form-wrapper select:focus { 
    outline:0;
    background:#f9f9f9;
    color:dodgerblue;
} .form-wrapper select option {
    color:black;
    font-weight:bold;
    text-overflow:none;
    padding-right:15px;
} .form-wrapper select option:hover { 
    background-color:grey;
    color:dodgerblue;
    cursor:pointer 
} .form-wrapper select option:focus { 
    background-color:lightgray;
    color:dodgerblue;
    cursor:pointer
}
</code></pre>

<p>Can anybody give me some guidance as to where I've gone wrong and how I can achieve the results?</p>