Firefox中select元素overflow:hidden属性失效问题求助

我之前遇到过一模一样的问题！Firefox对带multiple和size属性的<select>元素的overflow:hidden处理有点特殊——它不管内容有没有超出容器，都会强制显示滚动条，这就导致你的样式在Firefox里不生效，但Chrome、Edge这些浏览器就正常。

问题复现代码 #

CSS

select { 
  overflow: hidden; 
}

HTML

<select multiple size="20">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
</select>

效果对比 #

• Firefox显示效果：
  
  （即使内容未超出，滚动条依然强制显示）

• 其他浏览器显示效果：
  
  （滚动条被overflow:hidden正常隐藏）

解决方案 #

这里有两个靠谱的方法可以解决这个问题：

方法1：用容器包裹隐藏滚动条（推荐，不破坏默认样式）

给<select>套一个父容器，让容器负责隐藏溢出的滚动条，同时把<select>的宽度设得比容器宽一点，把滚动条挤到容器外面：

.select-wrapper {
  overflow: hidden;
  width: 200px; /* 根据你的需求自定义宽度 */
}
.select-wrapper select {
  width: calc(100% + 20px); /* 比容器宽出滚动条的宽度，数值可根据实际调整 */
  overflow: hidden;
}

修改后的HTML：

<div class="select-wrapper">
  <select multiple size="20">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
  </select>
</div>

这个方法不会改变select的默认样式，只是把滚动条藏起来，兼容性拉满。

方法2：修改Firefox的默认外观（会改变样式）

用-moz-appearance:none强制Firefox去掉默认的select样式，这样overflow:hidden就能生效，但会丢失Firefox的默认下拉框样式，需要自己补全自定义样式：

select {
  overflow: hidden;
  -moz-appearance: none;
}

如果你的项目刚好需要自定义select样式，这个方法可以用；但如果想保留浏览器默认样式，还是方法1更合适。

原因说明 #

Firefox对于带有multiple和size属性的多行select，有自己的内置样式逻辑——它会强制渲染滚动条，哪怕内容完全没有超出容器范围，这是浏览器的特有行为，和其他浏览器的处理方式不同，所以直接设置overflow:hidden不会生效。

内容的提问来源于stack exchange，提问作者My testing