入力と同じアウトライン・スタイリングを選択してください

Question

私の要件は、コード内でマークアップとCSSを使用したように、選択エレメントのエッジがシャープになることです。

問題は、セレクタにフォーカスがあるときに入力と同じスタイリングを使用したいと思うことです。

入力には境界線とアウトラインがあります。

私はソートで同じ効果を得ることができますが、アウトラインを2回使用できないため、フォーカスがあると枠が丸くなります。

これには方法がありますか？

div { 
 
    margin: 10px 0; 
 
} 
 

 
input[type="text"] { 
 
    border: 1px solid #727272; 
 
} 
 

 
input[type="text"]:focus { 
 
    border: 2px solid #0065bd; 
 
    outline: 3px solid #ffbf47; 
 
    outline-offset: 0; 
 
} 
 

 
select { 
 
    outline: 1px solid #727272; 
 
} 
 

 
select:focus { 
 
    border: 2px solid #0065bd; 
 
    outline: 3px solid #ffbf47; 
 
    outline-offset: 0; 
 
}

<div> 
 
    <input type="text" /> 
 
</div> 
 
<div> 
 
    <select> 
 
    <option>One</option> 
 
    <option>Two</option> 
 
    </select> 
 
</div>

Answer 1

ことは、これを試してみてください：

select {  
    -webkit-appearance: none; 
    -webkit-border-radius: 0px; 
} 

Answer 2

FWIWは、バージョン62.0.3202.62（公式ビルド）（64ビット）に丸め得ていません。