CSS样式化html表单选择下拉菜单

Question

我想更改基本HTML表单SELECT元素的外观，使其具有灰色背景，并且选项具有较浅的灰色背景，并且选择主元素或选项行周围没有边框。

我修复了背景颜色，并且SELECT项在页面上处于非活动状态时看起来很好。但是当我点击打开菜单（选择项目）时，选项行上方和下方可能有5px高的白色边距，选项行周围也可能有1px或2px厚的边框。我不知道这些视觉上令人不安的细节来自哪里，以及如何摆脱它们。

这是我的HTML和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;
}