CSS类使HTML选择看起来像跨度

Question

I am trying to make select look like span based on some condition. i have following css class that works fine with input boxes but it doesnt work with dropdown. Any guidance how can i make the select look like span rather than replacing select with span?

jQuery function

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

CSS

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

Answer 1

Trying to style SELECTs is a dead end. Replacing SELECTs upon pageload with lists that look and behave just like SELECTs? Totally doable: http://filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/

Always keep accessibility in mind, though.

Answer 2

You should just replace the select with a span . That's the standard way of doing what you're trying to do, and I think you'll have a lot of difficulty making a select look like anything other than a select since it's a system control. select elements don't even look the same on different browsers/operating systems, because as a web developer you don't have the ability to restyle it.

Even your standard restyled combo boxes and such, like the many jQuery plugins available out there, hide the original select and replace it with a series of div s and such.

Answer 3

How about making it disabled :

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

W3C Recommendation:

In contexts where user input is either undesirable or irrelevant, it is important to be able to disable a control or render it read-only. For example, one may want to disable a form's submit button until the user has entered some required data. Similarly, an author may want to include a piece of read-only text that must be submitted as a value along with the form. The following sections describe disabled and read-only controls.

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

Answer 4

You can't. There is no style available to remove the arrow that you see in the drop down.

You are going to replace the drop down with a span if you want it to look like a span. All other are hacks are not going to be browser compatible or simply complicating it.

One such method to hide arrow How to remove the arrow from a select element in Firefox

Answer 5

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

background-color: black;