移动端Chrome中HTML datalist横向滚动问题解决求助

我在HTML表单中使用datalist功能，代码如下：

<input list="veepeeone" name="veepeeone" placeholder="Null" value="{{ veepeeone }}" autocomplete="off">
<datalist id="veepeeone">
  {% for member in pastorate_male %}
  <option value="{{ member.name }}">
  {% endfor %}
</datalist>

功能整体正常，但在移动端Google Chrome加载表单时，键盘上方会出现烦人的横向滚动条，用户体验极差。而在三星互联网等其他浏览器中，选项为垂直加载，这似乎是Chrome特有的问题。部分表单字段包含多达100个选项，横向滚动对用户来说体验糟糕，且多数用户默认使用Chrome。请问是否有办法（包括使用JS）强制所有浏览器（含Chrome）像其他浏览器一样垂直加载选项？

可行的解决方法 #

1. 尝试CSS样式覆盖（针对Chrome移动端） #

Chrome移动端的datalist下拉样式由浏览器原生控制，没有公开的标准CSS选择器直接修改，但可以尝试私有hack调整：

/* 强制选项换行并限制宽度，避免横向滚动 */
input::-webkit-datalist-option {
  white-space: normal !important;
  max-width: 100vw !important;
}

注意：这类webkit私有选择器可能随Chrome版本更新失效，需实际测试验证效果。

2. 替换为自定义下拉组件（推荐） #

原生datalist的跨浏览器样式兼容性差，最稳定的方案是用JS实现自定义下拉，完全控制展示逻辑：

• 隐藏原生datalist，监听输入框的input事件动态渲染自定义下拉列表
• 下拉列表采用垂直布局，超出高度时显示垂直滚动条
• 点击选项时填充值到输入框并隐藏下拉

简化示例代码：

<input type="text" id="customInput" name="veepeeone" placeholder="Null" value="{{ veepeeone }}" autocomplete="off">
<!-- 自定义下拉容器 -->
<div id="customDropdown" style="display:none; max-height:200px; overflow-y:auto; border:1px solid #ccc; position:absolute; background:white; width:100%;"></div>

<script>
const input = document.getElementById('customInput');
const dropdown = document.getElementById('customDropdown');
// 复用后端传递的选项数据
const options = [{% for member in pastorate_male %}"{{ member.name }}",{% endfor %}];

// 渲染过滤后的选项
function renderOptions(filteredOptions) {
  dropdown.innerHTML = '';
  filteredOptions.forEach(opt => {
    const item = document.createElement('div');
    item.textContent = opt;
    item.style.padding = '8px';
    item.style.cursor = 'pointer';
    item.addEventListener('click', () => {
      input.value = opt;
      dropdown.style.display = 'none';
    });
    dropdown.appendChild(item);
  });
}

// 输入时实时过滤选项
input.addEventListener('input', () => {
  const filter = input.value.toLowerCase();
  const filtered = options.filter(opt => opt.toLowerCase().includes(filter));
  dropdown.style.display = filtered.length ? 'block' : 'none';
  renderOptions(filtered);
});

// 点击外部关闭下拉
document.addEventListener('click', (e) => {
  if (!input.contains(e.target) && !dropdown.contains(e.target)) {
    dropdown.style.display = 'none';
  }
});
</script>

这种方式完全脱离浏览器原生样式限制，能保证所有浏览器展示一致。

3. 降级为select标签（简单替代） #

如果不需要实时输入过滤功能，直接用<select>标签替代datalist，原生select在所有移动端浏览器中均为垂直滚动布局：

<select name="veepeeone">
  <option value="">Null</option>
  {% for member in pastorate_male %}
  <option value="{{ member.name }}" {% if member.name == veepeeone %}selected{% endif %}>{{ member.name }}</option>
  {% endfor %}
</select>

缺点是无法支持输入过滤，适合选项数量不多或无过滤需求的场景。

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