在div后面隐藏一个select列表并用JavaScript选择它有什么问题吗？

我需要在选择列表中水平居中文本，特别是android和iPhone。这似乎不能与CSS做，所以我在寻找一个解决办法

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

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

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

更新-我尝试了以下方法，其中divcover包含一个select输入。它在我的iPad上运行良好。然而，我的旧安卓系统并不总是专注于输入。Firefox确实关注输入，但选项不能让你飞，你必须用箭头键滚动它们。看来这个解决方案并不像我希望的那么简单

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

---

你把select隐藏在div后面的想法看起来还可以 我做了一件更复杂的事情——完全隐藏select，用HTML替换它，用JS进行所有交互，用CSS进行所有样式设置，并反映对底层select的更改，例如可以以正常方式作为表单元素提交

我编写的jQuery插件非常小，因为我将所有样式和位置都放在CSS中，这使我能够完全控制外观和很大的灵活性

代码如下：

---

我使用了一个更为复杂的想法，即获取屏幕宽度并从中计算。没那么麻烦。我会发布一些代码，除非我妻子会生气：想想看，它实际上会比我想象的更复杂。不同的选定选项具有不同的宽度，因此需要进行不同的计算。我的一个输入有100多个选项可供选择。我不认为大量不同的宽度会破坏这种可能性。您可以在卸载和任意调整大小时计算屏幕宽度sw。选择每个选项时，可以动态计算选项宽度。然后设置选项left=sw ow/2。也许有更好的方法，但它是可行的。我在这里提出了一个新问题，试图用你的方式去做。获取文本的字符串长度很容易，但获取像素宽度（当它是选择列表中的一个选项时）似乎很难：你的插件是为公共许可证发布的吗？Thankswell，没有在任何地方发布，尽管我认为我可以在JSFIDLE的某个地方轻松地共享它

 function textIndentFunc () {

    textString = $('#from-1 :selected').text();

     $('#hidden').text(textString);

     textWidth = $('#hidden').width();

     inputWidth = $('#from-1 select').width();

     indentMy = (inputWidth / 2) - (textWidth / 2);

    $('#from-1').css('text-indent',indentMy);

}

 $('#from-1 select').change(function() {
    textIndentFunc();
 });

 textIndentFunc();