El selector de solo lectura se utiliza para seleccionar ese elemento que solo se puede leer . El de solo lectura se utiliza para deshabilitar los campos. Principalmente, la pseudoclase de solo lectura representa un elemento que el usuario no puede editar.
Sintaxis:
:read-only {
// CSS property
}
Ejemplo 1:
<!DOCTYPE html>
<html>
<head>
<style>
input:-moz-read-only {
text-align: center;
margin:10px;
padding: 5px;
color:Green;
}
input:read-only {
text-align: center;
margin:10px;
padding: 5px;
color:Green;
}
h1 {
color:green;
}
body {
text-align:center;
}
</style>
</head>
<body>
<h1>Geeksforgeeks</h1>
<h2>:read-only selector</h2>
<p>Read contents only:<br><input readonly value =
"GeeksforGeeks: computer science portal"></p>
</body>
</html>
Producción:
Ejemplo 2:
<!DOCTYPE html>
<html>
<head>
<title>:read-only selector</title>
<style>
h1 {
color:green;
}
input:read-only {
background-color:Green;
color:white;
text-align:center;
}
input:-moz-read-only {
background-color:Green;
border:1px solid black;
border-radius:4px;
padding:4px;
color:white;
text-align:center;
}
body {
text-align:center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>:read-only Selector</h2>
<input type="text" value="Editable Contents">
<input type="text" value="Non-editable contents" readonly>
</body>
</html>
Producción:
Navegador compatible: los navegadores compatibles con :selector de solo lectura se enumeran a continuación:
- Google Chrome 36.0
- Internet Explorer 13.0
- Firefox 3.0 -moz-
- Safari 9.0
- Ópera 23.0
Publicación traducida automáticamente
Artículo escrito por Sabya_Samadder y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA