Chrome浏览器：在圆形选择菜单周围禁用平方轮廓？

Question

Squared Outline / Edges（图片）我正在尝试删除（Chrome）：

目标......（Firefox浏览器）：

CSS：

.wide5 {
    width: 28%;
    height:32px;
    font-size: 16px;
    border-radius: 7px 7px 7px 7px;
    border: 3px solid #D2D2CD;
    padding: 4px 8px 4px 6px;
    outline:none;
    margin-bottom:4px;
}

.wide5:focus {
    border: 3px solid #00AEEF;
    outline:none;

}

HTML：

<select class="wide5">
<option value="1">1 Unit</option>
<option value="2">2 Units</option>
</select>

Answer 1

在选择菜单上添加-webkit-appearance: none;会在Chrome中为您提供所需的行为.. 但会删除选择箭头..不确定您是否介意。

无论哪种方式，我认为没有Javascript，这是你最好的...除非你重新设置<select>菜单..