mattfetz mattfetz - 21 days ago 5
CSS Question

Firefox Responsive Select Icon Disappearing

I have an issue with the Firefox select element where when I shrink the width to just the button icon, the icon will disappear when zooming out.

Open in Firefox and zoom out to 90%
https://jsfiddle.net/uqLvphwu/6/

Html

<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;
}


This seems to be a bug with Firefox's responsiveness but wanted to see if anyone had a work around with css.

Answer

Try to convert px into em or even better rem. Both em and rem are scalable and therefor work better with responsive websites. The example doesn't completely fix your problem but it's a start.

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>