CSS-styling a html form select dropdown menu

Question

I want to change the appearance of the basic HTML form SELECT element, so that it has a grey background, and the options have a lighter grey background, and no border around the select main element or the option rows.

I get the background colours fixed, and the SELECT item looks good when it is inactive on the page. But when I click to open the menu (to choose an item), there is a maybe 5px high white margin over and under the option rows, and also a maybe 1px or 2px thick border around the option rows. I have no idea where these visually disturbing details come from, and how I can get rid of them.

This is my HTML and CSS:

<div class="grey-select-menu">
<select>
<option value="en">English</option>
<option value="fr">French</option>
<option value="de">German</option>
<option value="es">Spanish</option>
</select>
</div>

.grey-select-menu {
color:         #7777f5;
width:         172px;
height:        34px;
overflow:      hidden;
background:    url(pics/select_menu_arrow.png) no-repeat right #4c4c51;
border-radius: 4px;
border-style:  none;
border-width:  0px;
}
.grey-select-menu select {
color:              #f5f5f5;
background:         transparent;
width:              200px;
font-size:          16px;
border-style:       none;
border-radius:      4;
height:             34px;
outline:            0px;
margin:             0px;
border:             0px currentColor;
}
.grey-select-menu option {
color:              #f5f5f5;
background:         #77777c;
width:              172px;
font-size:          16px;
border-style:       none;
height:             24px;
-webkit-appearance: none;
}