El selector :read-write se utiliza para seleccionar un elemento (como un texto de entrada) que el usuario puede editar. Los elementos sin atributos de solo lectura y deshabilitados se definen como de lectura y escritura.
Sintaxis:
:read-write {
// CSS Property
}
Ejemplo 1:
<!DOCTYPE html>
<html>
<head>
<title>:read-write Selector</title>
<style>
input {
min-width: 25em;
padding: 10px;
}
/* CSS property for Firefox only */
input:-moz-read-write {
background: green;
color: white;
}
input:read-write {
background: green;
color: white;
}
</style>
</head>
<body style = "text-align:center">
<h2>
:read-write Selector
</h2>
<input type = "text" value =
"Editable input field"><br><br>
<input type = "text" value =
"This is a read-only input field." readonly>
</body>
</html>
Producción:
Ejemplo 2:
<!DOCTYPE html>
<html>
<head>
<title>:read-write Selector</title>
<style>
p:-moz-read-write {
background: green;
}
p:read-write {
background: green;
}
p[contenteditable = "true"] {
color: white;
}
</style>
</head>
<body style = "text-align:center">
<h2>
:read-write Selector
</h2>
<p>
This is a normal paragraph
</p>
<p contenteditable = "true">
This is editable paragraph!
</p>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con :read-write Selector se enumeran a continuación:
- Apple Safari 9.0
- Google Chrome 36.0
- Firefox 3.0 -moz-
- Ópera 23.0
- Internet Explorer 13.0
Publicación traducida automáticamente
Artículo escrito por Vishal Chaudhary 2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA