Making a text input field look disabled, but act readonly

I have an HTML input field that I want the user to be able to see, but not edit. If I mark the field as 'disabled', it doesn't get submitted along with the rest of the form. If I mark it as 'readonly', it behaves like what I want, but still looks enabled (at least on Chrome).

Basically, I want the input field to look like a disabled field, but behave as a readonly field. Is this possible?

Thanks.

edit: Also, if I mark it as 'readonly开发者_运维技巧', it's still possible to change its value by double clicking it, and selecting something that was previously there.

---

Here is workaround: You have input disabled where you want ( just for displaying value ) and have a hidden input with name and value you need.

---

You could use css to make it look however you want, although this may not match other disabled fields cross browser/platform.

<input type="text" value="Sample text" readonly="readonly" style="color: #787878;"/>

---

I had a similar issue with JSF in which a hidden field worked for persisting the value I needed, but the value in a readonly or disabled input field would get cleared if validation of the form failed upon submission. I found an alternate solution that seems to work rather elegantly by leaving the input field technically editable, but which prevents editing by doing a blur as soon as it receives focus. While you may not have the same issue with your server-side environment that I did with JSF (which doesn't submit values even from input fields marked merely readonly), you might be able to use the same technique in your situation, with the upshot being that you then don't need a separate hidden field to persist the value. Like the second answer, however, it doesn't address the issue of making the field look disabled, at least not without some additional CSS code.

The code in JSF:

<p:inputText id="entid" value="#{RequestBean.entityID}" onfocus="blur();" />

which becomes the following HTML:

<input id="entid" type="text" value="10003" onfocus="blur();" />

You can see more on it here: How to persist JSF view parameters through validation

---

I know this as been answered but wanted to give my CSS example.

Because when I was searching for a solution, how to style a input field so it looked like it was disabled, I always ended up with an input field looking like this.

With the border- left & top having a darker color etc. So a solved it using this CSS code.

input[readonly]{
  border-color: darkgrey;
  border-style: solid;
  border-width: 1px;
  background-color: rgb(235, 235, 228);
  color: rgb(84, 84, 84);
  padding: 2px 0px;
}

Made an jsfiddle so you guys can take a closer look.

It looks good on Chrome, on other browsers you need to modify the colors abit. Like in Firefox you need too change the color and Background-color to etc.

background-color: rgb(240, 240, 240);
color: rgb(109, 109, 109);