Question

I am trying to disable user text input in a text field, and am using the readonly="true" attribute on the input itself.

However, I don’t want it too look different then a default input field. I’m am trying to write a solution that will not make me go in and write CSS for it, as browsers may change their styling and make this miserable.

Is there any way to just remove the browsers readonly style?

Here’s a screenshot I’m talking about. The one on the right is readonly, but I want it to look the same as the one on the left.

Answer 1

Browser styles are by definition browser-specific, so any solution would be browser-specific. You would need to study the browser defaults (from documentation or via experimentation) and to serve different styles to different browsers. A lot of work, and I don’t quite see what the potential benefit might be. It would in general be bad for usability to remove the distinction between normal and disabled fields.

You can set the style explicitly to be the same for normal and disabled fields, but then you won’t get browser defaults.