css class to make html select look like span

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;
}

It's not that easy to style a select :P You may need a jQuery plugin to change select's appearance or some [tricky css](http://bavotasan.com/2011/style-select-box-using-only-css/) — scumah, Mar 02 '12 at 18:21

score 2 · Answer 1 · answered Mar 02 '12 at 18:28

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.

score 1 · Accepted Answer · answered Mar 02 '12 at 18:18

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.

Alex · Answer 3 · 2012-03-02T18:23:17.760

0

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

edited Mar 02 '12 at 18:23

answered Mar 02 '12 at 18:17

Alex

34,899
5
77
90

disabled makes them look like engraved. i want them to appear like normal span. also it doesnt get rid of dropdown button – Asdfg Mar 02 '12 at 18:19
@Asdfg you can style it to a *certain* extent. Other than that you will need to hide the `select` and display some other `element` like a `span` with the appropriate value. – Alex Mar 02 '12 at 18:23

score 0 · Answer 4 · edited May 23 '17 at 12:12

0

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

edited May 23 '17 at 12:12

Community

1
1

answered Mar 02 '12 at 18:20

Selvakumar Arumugam

79,297
15
120
134

score 0 · Answer 5 · answered Mar 02 '12 at 18:28

0

Not a viable solution but you should set the background-color to black for a select box to make it look like a span tag because you can not change the arrow color to something else.

background-color: black;

answered Mar 02 '12 at 18:28

codef0rmer

10,284
9
53
76

css class to make html select look like span

5 Answers5