Question

我遇到了Firefox选择元素的问题，当我将宽度缩小到按钮图标时，缩小时图标会消失。

在Firefox中打开并缩小到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;
}

这似乎是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>

Firefox响应选择图标消失

1 个答案: