javascript - 将选择列表隐藏在 div 后面并使用 JavaScript 选择它有任何问题吗？

Question

我需要在选择列表中水平居中文本，特别是对于 Android 和 iPhone。这似乎不能用 CSS 来完成，所以我正在寻找解决方法。

我正在考虑将输入隐藏在居中文本的 div 后面，并在单击 div 时使用 JavaScript 选择输入。然后我需要更改 div 中的文本以等于所选选项的文本。如果 div 是使用 JavaScript 创建的，则该页面将在禁用 JavaScript 的情况下可用。

我有另一个想法，但这对我来说似乎更棘手。我可以使用 JavaScript 获取屏幕宽度，应用计算，然后对输入应用适量的文本缩进。

我对最佳实践感兴趣，但这是一个演示项目，而不是实际项目。我正在使用 jQuery。谢谢

更新 - 我尝试了以下方法，其中 div#cover 覆盖了选择输入。在我的 iPad 上运行良好。然而，我的旧 Android 不会总是专注于输入。 Firefox 确实专注于输入，但选项并不会让你满意，你必须使用箭头键滚动它们。看来这个解决方案并不像id希望的那么简单。

$('div#cover').click(function(){
  $('#select').focus();
});

Answer 1

您将选择隐藏在 div 后面的想法看起来不错 我做了一件更复杂的事情 - 完全隐藏选择，用 HTML 替换它，进行 JS 的所有交互和 CSS 中的所有样式，并反射(reflect)对底层选择的更改(例如可以以正常方式作为表单元素提交) )

无论如何，我编写的 jQuery 插件非常小，因为我将所有样式和位置都放在 CSS 中，这让我可以完全控制外观和很大的灵 active