What is readonly in CSS?

What is readonly in CSS? Unpacking the `user-select` Property

You've likely encountered websites where you can't copy and paste text, or maybe you've seen form fields that look like they're disabled but are actually allowing you to see the content. This often has to do with a CSS property called user-select. While there isn't a direct `readonly` property in CSS that functions like the HTML attribute, the user-select property plays a crucial role in controlling how users can interact with text on a webpage, including making it appear "read-only" in terms of selection.

Understanding the `user-select` Property

The user-select property in CSS is designed to control whether the user can select text on an element. This is a powerful tool for web designers and developers to enhance user experience or protect content. It dictates whether a user can select text by clicking and dragging their mouse, or by using keyboard shortcuts like Ctrl+A (or Cmd+A on Mac) to select all text.

Think of it this way: normally, when you see text on a webpage, you can highlight it, copy it, and paste it elsewhere. The user-select property allows you to override this default behavior.

Common Values for `user-select`

The user-select property accepts several values, each with a distinct effect:

auto: This is the default value. The browser determines whether text can be selected. Typically, this means text is selectable.
none: This is the value that most closely mimics a "read-only" experience. When an element has user-select: none; applied, the user cannot select any text within that element. It's as if the text is permanently selected but unmovable or uncopyable.
text: This value explicitly allows text selection, even if the default behavior for an element would normally prevent it (though this is less common).
all: This value is interesting. It requires the user to select all the text within the element in a single selection action. For example, if you have a block of text with user-select: all;, a single click within the text might select the entire block, preventing partial selections.

How `user-select: none;` Creates a "Read-Only" Effect

When you apply user-select: none; to an HTML element, you're essentially telling the browser to disable the selection of text within that element. This has the visual and functional effect of making the content appear read-only because the user cannot interact with it by highlighting and copying.

Here's an example of how you might use it in your CSS:


.no-select-text {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10+ */
  user-select: none; /* Standard syntax */
}

Notice the vendor prefixes (-webkit- and -ms-). These are included for compatibility with older versions of certain browsers. While modern browsers are good at supporting the standard user-select property, it's still a good practice to include them for broader reach.

Where You Might See `user-select: none;` in Action

Form Fields: While the HTML readonly attribute is the standard way to make form input fields non-editable, user-select: none; can be applied to display-only text within forms or other UI elements to prevent accidental copying.
Copyrighted Content: Some websites use this to discourage casual copying of their written material.
Interactive Elements: In some user interfaces, certain labels or messages might be displayed in a way that you shouldn't select them, so user-select: none; is used.
Game Interfaces: Text elements in games, like scores or status messages, might be made unselectable.

It's important to remember that user-select: none; is a client-side control. It prevents users from *easily* selecting text through their browser. Determined users can often still find ways to access the underlying text, such as viewing the page source code.

Distinguishing `user-select` from HTML's `readonly` Attribute

It's crucial to understand the difference between the CSS user-select property and the HTML readonly attribute. They serve different purposes:

HTML readonly attribute: This attribute is specifically for form input elements (like <input> and <textarea>). When applied, it makes the field's value visible and selectable (you can copy it), but the user cannot change or submit a new value through that field. The value is still sent with the form submission.
CSS user-select property: This property controls the *selection* of text on any HTML element, not just form inputs. Setting it to none prevents selection altogether, making it look read-only in terms of interaction. It doesn't directly affect form submission behavior in the same way the readonly attribute does.

So, while user-select: none; can make text *appear* read-only by preventing selection, the HTML readonly attribute is the correct semantic way to indicate that a form input field's value cannot be modified by the user.

Browser Compatibility

The user-select property is well-supported across modern web browsers. However, as mentioned, using vendor prefixes for older versions is a good habit:

-webkit-user-select: For Chrome, Safari, and Opera.
-ms-user-select: For Internet Explorer 10 and later.
user-select: The standard property for Firefox and all modern browsers.

When implementing this, it's common to see the standard property listed last, so that if a browser supports it, it will override any older, prefixed versions.

Frequently Asked Questions (FAQ)

How can I make text on my webpage unselectable?

To make text on your webpage unselectable, you should use the CSS property user-select and set its value to none. For example, you would write user-select: none; in your CSS file. Remember to include vendor prefixes like -webkit-user-select: none; and -ms-user-select: none; for broader browser compatibility.

Why would I want to make text unselectable?

You might want to make text unselectable for several reasons. This can include preventing users from accidentally selecting and copying content, protecting copyrighted material from easy duplication, or improving the user experience in certain interfaces where text selection is not intended or could interfere with other interactions. It can also make certain elements appear as purely informational or static.

Is `user-select: none;` the same as the HTML `readonly` attribute?

No, they are not the same. The HTML readonly attribute is specifically used for form input elements to prevent the user from changing the input value, while still allowing the value to be selected and submitted. The CSS user-select: none; property affects the ability to *select* text on any element, and it doesn't directly control whether a form input can be modified or submitted.

Can users still copy text if `user-select: none;` is applied?

While user-select: none; makes it difficult for users to select text using standard mouse or keyboard actions, it does not make the text completely uncopyable. Determined users can often still access the text by viewing the page's source code or using browser developer tools.