Help us test MDN's new front-end: https://discourse.mozilla.org/t/help-us-test-mdns-new-react-front-end-beta/42593

Nossos voluntários ainda não traduziram este artigo para o Português (do Brasil). Junte-se a nós e ajude-nos a fazer o trabalho!
Você também pode ler o artigo em English (US).

The :read-only CSS pseudo-class represents an element (such as input or textarea) that is not editable by the user.

/* Selects any <input> element that is read-only */
/* Supported in Firefox with a prefix */
input:-moz-read-only {
  background-color: #ccc;
}

/* Supported in Blink/WebKit/Edge without a prefix */
input:read-only {
  background-color: #ccc;
}

Note: This selector doesn't just select <input>/<textarea> with readonly set on them; it will select any element that cannot be edited by the user.

Syntax

:read-only

Example

HTML

<input type="text" value="Type whatever you want here.">
<input type="text" value="This is a read-only field." readonly>
<p>This is a normal paragraph.</p>
<p contenteditable="true">You can edit this paragraph!</p>

CSS

input { min-width: 25em; }
input:-moz-read-only { background: cyan; }
input:read-only { background: cyan; }

p:-moz-read-only { background: lightgray; }
p:read-only { background: lightgray; }
p[contenteditable="true"] { color: blue; }

Result

Specifications

Specification Status Comment
HTML Living Standard
The definition of ':read-only' in that specification.
Living Standard No change.
HTML5
The definition of ':read-only' in that specification.
Recommendation Defines the semantics regarding HTML and constraint validation.
Selectors Level 4
The definition of ':read-only' in that specification.
Working Draft Defines the pseudo-class, but not the associated semantics.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
:read-onlyChrome Full support YesEdge Full support 13Firefox Full support 1.5
Prefixed Notes
Full support 1.5
Prefixed Notes
Prefixed Implemented with the vendor prefix: -moz-
Notes See bug 312971 for unprefixed status.
IE No support NoOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4
Prefixed Notes
Full support 4
Prefixed Notes
Prefixed Implemented with the vendor prefix: -moz-
Notes See bug 312971 for unprefixed status.
Opera Android ? Safari iOS ? Samsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

See also

Etiquetas do documento e colaboradores

Última atualização por: mdnwebdocs-bot,