css类，使html选择看起来像span

Question

我正试图根据某些条件使select看起来像span。我有下面的css类，它可以很好地处理输入框，但不能处理下拉列表。有什么指导意见吗？我如何让select看起来像span，而不是用span代替select？

jQuery函数

function makeReadOnly(context) {
   $('input, select', context).each(function() {
   $(this).addClass('readOnlyInput');
   });​
}

CSS

.readOnlyInput
{
   border-width: 0;
   background-color: Transparent;
   text-align: right;
}

Answer 1

尝试样式化SELECTs是一条死胡同。将页面加载时的SELECT替换为外观和行为与SELECT相似的列表？完全可行：http://filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/

不过，请始终牢记可访问性。

Answer 2

您应该将select替换为span。这是做你想做的事情的标准方式，我认为你会很难让select看起来像select之外的任何东西，因为它是一个系统控件。select元素在不同的浏览器/操作系统上看起来甚至不一样，因为作为一名网络开发人员，你没有能力对其进行重新设计

即使是标准的重新设计的组合框之类的，就像许多jQuery插件一样，也会隐藏原始的select，并用一系列div之类的替换它。

Answer 3

你不能。没有样式可用于删除您在下拉列表中看到的箭头。

如果你想让下拉框看起来像一个跨度，你就要用一个跨度来代替它。所有其他的黑客攻击都不会与浏览器兼容，或者只是使其复杂化

隐藏箭头的一种方法如何从Firefox 中的select元素中删除箭头

Answer 4

制作disabled:怎么样

function makeReadOnly(context) {
   $('input, select', context).each(function() {
      $(this).attr('disabled', 'disabled');
   });​
}

W3C建议：

在用户输入不受欢迎或不相关的情况下能够禁用控件或将其呈现为只读非常重要。例如，您可能希望禁用表单的提交按钮，直到用户输入了一些必需的数据。同样，作者可能希望包含一段必须作为值提交的只读文本以及表单。以下部分介绍了禁用和只读控件。

http://www.w3.org/TR/html4/interact/forms.html#h-17.12

Answer 5

这不是一个可行的解决方案，但您应该将选择框的背景色设置为黑色，使其看起来像span标记，因为您不能将箭头颜色更改为其他颜色。

background-color: black;