English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
:leer-Sólo el pseudo-clase CSS indica el estado de no editable del elemento (como el cuadro de entrada de texto bloqueado).
Manual de referencias de selector CSS completo
Establecer el atributo "readonly" en el elemento input, configurar el color de fondo en verde azulado:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Tutoriales básicos (oldtoolbag.com)</title>/title>
<style>
input { min-ancho: 25em; }
input:-moz-leer-solo { fondo: cian; }
input:leer-solo { fondo: cian; }
p:-moz-leer-solo { fondo: gris claro; }
p:leer-solo { fondo: gris claro; }
p[contenteditable="true"] { color: azul; }
</style>
</head>
<body>
<input type="text" value="Escribe aquí lo que quieras.">
<input type="text" value="Sólo lectura." readonly>
<p>Parrafo normal.</p>/p>
<p contenteditable="true">¡Parrafo editable!</p>/p>
</body>
</html>Prueba aquí ‹/›:leer-El selector solo se utiliza para seleccionar elementos que tienen el atributo "readonly" configurado.
Los elementos del formulario pueden establecer el atributo "readonly" para definir que el elemento sea de solo lectura.
Atención: Actualmente, la mayoría de los navegadores, :leer-El selector solo se aplica a los elementos input y textarea, pero también se aplica a los elementos que tienen el atributo "readonly" configurado.
Los números en la tabla indican la versión del primer navegador que admite la propiedad.
| Selector | |||||
|---|---|---|---|---|---|
| :leer-solo | Soportado | No se admite | -moz- | Sí | Sí |
/* Para seleccionar cualquier elemento input de solo lectura y soportarlo en Firefox, debe añadir-prefijo moz */
input:-moz-leer-solo {
fondo-color: #ccc;
}
input:leer-solo {
fondo-color: #ccc;
}Atención: este selector no solo selecciona elementos <input> con atributo readonly, también selecciona todos los elementos que no pueden ser editados por el usuario.
Selector CSS :leer-escribir