YouTipSel Read Only
## CSS :read-only Pseudo-class Selector
The `:read-only` CSS pseudo-class selector is used to target and style elements that cannot be edited by the user.
In web forms, elements can be made non-editable by adding the `readonly` attribute. The `:read-only` selector allows you to apply specific styles to these elements to visually distinguish them from editable fields.
---
### Syntax
```css
:read-only {
/* CSS declarations */
}
```
You can also restrict the selector to specific elements, such as `input` or `textarea`:
```css
input:read-only {
background-color: #f0f0f0;
}
```
---
### Code Examples
#### Example 1: Styling Read-Only Input Fields
In this example, any `` element with the `readonly` attribute will have a yellow background, while editable inputs remain default.
```html
```
---
### Definition and Usage
* **Purpose:** The `:read-only` selector targets elements that are not user-editable.
* **Common Elements:** It is most commonly applied to `` and `