Question 317041 in Html Question posted in
Some basic documentation can be found here.

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

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.
Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    There are multiple ways to achieve this:

    1. You can just leave both attributes within your element, since you are looking for an HTML-only solution. For example:

    <input type="text" id="yourElementId" value="Disabled input" readonly disabled>

    Whenever you need the element enabled, you can remove the attributes, using JavaScript, or set the attributes if you want to disable the element:

    Enabling the element

    document.getElementById("yourElementId").removeAttribute("readonly");
document.getElementById("yourElementId").removeAttribute("disabled");

    Disabling the element

    document.getElementById("yourElementId").setAttribute("readonly", true);
document.getElementById("yourElementId").setAttribute("disabled", true);

    2. Alternatively, you can try leaving the readonly property, so that the contents cannot be edited and can be selected, and create a CSS rule for a custom class selector and play with the opacity of the element. For example:

    .greyed {
  opacity: 0.5;
}

    Since you mentioned that you only need the readonly attribute for some steps of the entire flow, you can toggle the class into or out of the element each time you need it to. For example:

    document.getElementById("yourElementId").classList.toggle("greyed");

    If the element already contains the toggled class, then the class will be removed and vice versa. If you need the class removed, so that the element appears active again, you can proceed to remove the element’s attribute as well:

    document.getElementById("yourElementId").removeAttribute("readonly");

    3. You could also skip the readonly and disabled attributes entirely and create a CSS rule that groups all your requirements together. For example:

    .disabled {
  user-select: auto;
  pointer-events: none; /* For the arrow cursor */
  pointer-events: auto; /* For the I cursor */
  opacity: 0.5;
}

    Similarly, every time you need to enable the element you can just toggle the class out of the element, and vice versa, like before:

    document.getElementById("yourElementId").classList.toggle("disabled");

    Anything suggested above achieves what you are looking for.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search