Firefoxレスポンスアイコンを選択していない消灯

Question

Firefoxの選択要素に問題があります。ここで、ボタンのアイコンだけに幅を縮小すると、アイコンがズームアウト時に消えます。

オープン https://jsfiddle.net/uqLvphwu/6/

HtmlのFirefoxで、90％までズームアウト

<select> 
    <option>--Select--</option> 
    <option>test1</option> 
    <option>test2</option> 
    <option>test3</option> 
    <option>test4</option> 
    <option>test5</option> 
    <option>test6</option> 
    </select> 

CSS

select { 
    height: 41px; 
    width: 20px; 
    background-color: #F9F9F9; 
    border-radius: 5px; 
    border: 1px solid lightgrey; 
} 

これは、Firefoxの応答性とバグのようですが、誰かどうかを確認したかったですcssで回避策がありました。

Answer 1

pxをemに変換するか、さらにはremに変換してください。 emとremの両方がスケーラブルであり、そのためレスポンシブウェブサイトでうまく機能します。この例はあなたの問題を完全に解決するわけではありませんが、それは始まりです。

body { 
 
    font-size: 14px; 
 
} 
 
select { 
 
    height: 4rem; 
 
    width: 1.5rem; 
 
    background-color: #F9F9F9; 
 
    border-radius: 0.8rem; 
 
    border: 1px solid lightgrey; 
 
}

<select> 
 
    <option>--Select--</option> 
 
    <option>test1</option> 
 
    <option>test2</option> 
 
    <option>test3</option> 
 
    <option>test4</option> 
 
    <option>test5</option> 
 
    <option>test6</option> 
 
    </select>