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

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 divs and such.