Getting input elements that are noneditable, greyed out, but with content selectable

Issue

Edit: I just noticed Chrome and Firefox already achieve with readonly what I'm looking for: noneditable, selectable, and greyed out. The issue is that on the Pale Moon browser, the readonly inputs are not greyed out.

I'm keeping the question open for now, in case somebody has insight to provide.

Edit 2: Nope, also in Chrome and Firefox, the readonly inputs are not greyed out. I got confused because on the MDN page, there is a site CSS that greys out the readonly inputs… (using the :read-only pseudo-class, which is not supported on Pale Moon)

---

Original question:

I have <input type="text"> and <textarea> elements, whose content should not be editable at some steps.

So, initially I added a disabled property to these elements. The elements become noneditable, and greyed out. This behavior is fine.

However, their content should be selectable, and the disabled property avoids that. So I switched to the readonly property. The elements are still noneditable, and the content can be selected, but they are no longer greyed out.

So, I'm looking for a solution to have elements that are: noneditable, selectable, and greyed out.

• I could apply some CSS, but I would prefer to have the native browser styles of disabled inputs.
• The elements are not part of a <form>, so there is no need to worry about form submissions.

Solution

To achieve the desired behavior of having noneditable, selectable, and greyed-out elements without using the disabled property, you can use a combination of CSS and the readonly attribute. You can style the readonly elements to look like they are disabled while preserving the ability to select their content. Here's an example of how you can achieve this:

input[readonly],
textarea[readonly] {
    color: #777; /* Set text color to a muted color */
    background-color: #eee; /* Set background color to a light grey */
    cursor: not-allowed; /* Show a not-allowed cursor to indicate non editable state */
 }

 /* Adjust the style for textareas, if needed */
 textarea[readonly] {
   resize: none; /* Disable textarea resizing */
 }

<!-- Your HTML elements with readonly attribute -->
<input type="text" readonly>
<textarea readonly></textarea>

Unfortunately, the native styles of disabled inputs may vary across browsers, and there's no direct way to achieve the exact appearance while preserving content selection.

However, you can use a combination of styles to come close to the disabled input appearance while maintaining the content selectability

Answered By - Unsleeping