[Fixed]-Making a text input field look disabled, but act readonly

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

I had the same problem, I want to disable a input box but I need to pass the value while submiting the form.

And the following css worked for me as expected,

pointer-events: none;
background-color: #f1f1f2;

This makes the input box disabled and also passes the value while submitting the form.