Can I transform an HTML select to "regular text" using CSS?

Question

I have a drop down box on a web page, using the HTML5 <select> tag. There are times where I want to make it "read only", that is display it as text only. For example:

Sometimes I want it to be "read/write":

And other times I want it to be "read only":

I would prefer not to use the "disable" attribute. I think it looks tacky, and implies that there is somehow a choice to the user when none is available.

Is it possible to transform the look of the current option for a select into normal text using CSS?

Answer 1

Yes, use the CSS:

select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none; 
    border: none;
    /* needed for Firefox: */
    overflow:hidden;
    width: 120%;
}

example:

http://jsfiddle.net/eG3dS/

Because of the "needed for Firefox" section, you will need to make a div or span that constrains the select box size. It's too bad FF doesn't respect moz-appearance here.

Note that even though this makes it look like normal text, it is still a working select box! You will need to disable it some way, either by using the "disabled" attribute and changing the font color or otherwise.