css类使html选择看起来像span

Question

我试图根据某些条件选择看起来像span。我有跟随css类，使用输入框工作正常，但它不适用于下拉列表。任何指导如何使选择看起来像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

尝试设置SELECT样式是一个死胡同。 在页面加载时使用看起来和行为类似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元素在不同的浏览器/操作系统上看起来不一样，因为作为Web开发人员，您无法重新设置它。

即使是标准的重新设计的组合框等，就像那里提供的许多jQuery插件一样，隐藏原始的select并将其替换为一系列div等等。

Answer 3

如何制作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 4

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

如果您希望它看起来像一个跨度，您将用一个跨度替换下拉。所有其他黑客都不会与​​浏览器兼容或只是让它复杂化。

隐藏箭头How to remove the arrow from a select element in Firefox

的一种方法

Answer 5

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

background-color: black;