css - Chrome ブラウザ: 丸い選択メニューの周りの正方形のアウトラインを無効にしますか?

Question

正方形のアウトライン/エッジ (画像) 削除しようとしています (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;選択メニューに追加すると、クロムで目的の動作が得られますが、選択矢印は削除されます。気になるかどうかはわかりません。

<select>いずれにせよ、メニューのスタイルを変更しない限り、Javascriptなしでそれが最善だと思います。