Firefox移动端多选下拉框显示异常问题求助

看起来你遇到了原生<select>跨浏览器行为不一致的典型问题——Firefox Mobile对带multiple属性的下拉框处理逻辑和Chrome Mobile不一样，咱们来拆解下问题和解决办法：

问题根源 #

你给<select>设置了size="15"和multiple="multiple"，Chrome Mobile会忽略size属性，默认把多选下拉框渲染成点击展开的控件；但Firefox Mobile会严格遵循size的值，直接展示15行选项（刚好是你所有选项的数量），所以就出现了直接展开全部选项的情况。

解决方案 #

1. 动态调整size属性（兼顾桌面/移动端）

如果需要在桌面端保持固定高度的多选框，移动端转为下拉样式，可以用JS配合媒体查询实现：

// 调整select的size属性
function setSelectSize() {
  const sectorSelect = document.getElementById('job_sector1');
  // 判断是否为移动端（阈值可根据你的需求调整）
  const isMobile = window.innerWidth < 768;
  if (isMobile) {
    sectorSelect.removeAttribute('size');
  } else {
    sectorSelect.setAttribute('size', '15');
  }
}

// 页面加载时初始化
setSelectSize();
// 窗口大小变化时重新调整
window.addEventListener('resize', setSelectSize);

也可以用CSS在桌面端控制高度，直接移除HTML里的size属性：

/* 桌面端设置固定高度 */
@media (min-width: 768px) {
  #job_sector1 {
    height: 300px; /* 对应原来size=15的大致高度 */
  }
}

2. 用自定义组件实现一致体验（推荐）

原生select的跨浏览器差异很难完全抹平，如果你想要所有移动端浏览器都有统一的下拉多选体验，不如自己实现一个自定义组件：

<!-- 自定义多选容器 -->
<div class="custom-multiselect">
  <div class="multiselect-trigger">请选择行业 ▼</div>
  <div class="multiselect-options">
    <label>
      <input type="checkbox" name="job_sector[]" value="Agriculture, Food and Natural Resources">
      Agriculture, Food and Natural Resources
    </label>
    <label>
      <input type="checkbox" name="job_sector[]" value="Architecture and Construction">
      Architecture and Construction
    </label>
    <!-- 其他选项依次添加 -->
  </div>
</div>

然后用CSS实现展开/收起的样式，再用JS处理触发逻辑：

.custom-multiselect {
  position: relative;
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.multiselect-trigger {
  padding: 8px 12px;
  cursor: pointer;
}
.multiselect-options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  border: 1px solid #ccc;
  border-top: none;
  max-height: 200px;
  overflow-y: auto;
  display: none;
  background: white;
}
.multiselect-options label {
  display: block;
  padding: 8px 12px;
  cursor: pointer;
}
.multiselect-options label:hover {
  background: #f5f5f5;
}

const trigger = document.querySelector('.multiselect-trigger');
const options = document.querySelector('.multiselect-options');

trigger.addEventListener('click', () => {
  options.style.display = options.style.display === 'block' ? 'none' : 'block';
});

// 点击外部收起
document.addEventListener('click', (e) => {
  if (!e.target.closest('.custom-multiselect')) {
    options.style.display = 'none';
  }
});

这样自定义的组件在所有浏览器里表现都一致，还能自定义样式，适配你的网站设计。

3. Firefox专属CSS Hack（快速临时修复）

如果你只想针对Firefox Mobile调整，可以用Firefox专属的CSS前缀：

@-moz-document url-prefix() {
  @media (max-width: 768px) {
    #job_sector1 {
      size: 1 !important; /* 强制Firefox移动端显示为单行 */
    }
  }
}

不过这个方法属于临时hack，长期来看还是推荐前两种方案，避免浏览器更新导致兼容问题。

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