css - Chrome 浏览器：禁用圆形选择菜单周围的方形轮廓？

Question

平方轮廓/边缘（图像）我正在尝试删除（Chrome）：

目标...（火狐浏览器）：

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>菜单 ..