:read-only

La pseudo-clase (en-US) :read-only de CSS representa un elemento que ya no es editable por el usuario (como un input).

css

/* Selecciona cualquier <input> que está en modo de solo lectura */
/* Soportado en Firefox usando prefijo */
input:-moz-read-only {
  background-color: #ccc;
}

/* El prefijo no es necesario en navegadores basados en Blink/WebKit/Edge  */
p:read-only {
  cursor: not-allowed;
}
input:read-only {
  background-color: #ccc;
}

Nota: El selector no solo selecciona <input> marcados como readonly; también selecccionará cualquier elemento que no pueda ser editar por el usuario. Lea sobre el atributo contenteditable.

Síntaxis

:read-only

Ejemplo

HTML

html

<input type="text" value="Aquí puedes poner lo que quieras." />
<input type="text" value="Campo de solo lectura." readonly />
<p>Este es un párrafo normal.</p>
<p contenteditable="true">Puedes editar este párrafo, ¡inténtalo!</p>

CSS

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;
}

Resultado

Especificaciones

Specification
HTML Standard
# selector-read-only
Selectors Level 4
# rw-pseudos

Compatibilidad con navegadores

BCD tables only load in the browser

Ver también