1

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

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

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

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

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

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

2 回答 2

0

代码来自这里：jQuery - 在 div 点击时触发函数运行良好，但在页面加载时不运行

 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();
于 2012-05-14T16:17:53.107 回答
0

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

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

于 2012-05-10T11:57:15.693 回答