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中的所有样式进行所有交互并反映对底层选择的更改（例如可以以正常方式作为表单元素提交）

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

Answer 2

代码来自此处：jQuery - function runs fine when fired on div click, but not on page load

 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();

隐藏div后面的选择列表并使用JavaScript选择它的任何问题？

2 个答案: