:read-only CSS Pseudo Class

The :read-only pseudo-class in CSS is used to select elements that are not editable by the user. It specifically targets elements that have been rendered in a state where the user cannot modify their value, making it particularly useful for form elements such as input, textarea, or contenteditable elements that have been set to read-only. This pseudo-class allows developers to apply specific styles to these non-editable elements, enhancing visual feedback and improving user experience.

When applied, :read-only can be used to differentiate between elements that can be edited and those that cannot. For example, you might want to style read-only input fields with a different background color or border style to signal that they are not interactive. This pseudo-class complements :read-write, which targets elements that can be edited by the user.

It’s important to note that :read-only does not require the element to explicitly have the readonly attribute, although many browsers use the presence of this attribute to determine read-only status. Elements with disabled attributes, however, are generally not considered read-only; they are excluded from this pseudo-class. Additionally, :read-only respects the natural read-only behavior of certain form elements, such as file inputs and buttons, which are inherently non-editable.

Here’s a practical example of how :read-only can be used:

<form>
  <label for="username">Username (read-only):</label>
  <input type="text" id="username" value="ReneSpronk" readonly>
  
  <label for="email">Email (editable):</label>
  <input type="email" id="email" value="user@example.com">
</form>

input:read-only {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  color: #666;
  cursor: not-allowed;
}

input:read-write {
  background-color: #fff;
  border: 1px solid #888;
  color: #000;
}

In this example, the read-only input field appears grayed out and visually signals to the user that it cannot be edited, while editable fields remain interactive. Using :read-only can also improve accessibility by providing visual cues that distinguish editable content from non-editable content, making forms easier to navigate.