El selector :disabled se utiliza para seleccionar el elemento deshabilitado. Esta propiedad se usa principalmente en los elementos de formulario.
Sintaxis:
:disabled {
// CSS property
}
También puede establecer un color de fondo para todos los elementos de entrada deshabilitados de tipo = «texto»:
input[type=text]:disabled {
background: #dddddd;
}
Ejemplo 1:
<!DOCTYPE html>
<html>
<head>
<title>disable property</title>
<style>
h1 {
color:green;
}
input[type=text]:enabled {
background: green;
}
input[type=text]:disabled {
background: white;
}
input {
width:150px;
padding-left:10px;
margin-top:10px;
border:1px solid black;
}
body {
text-align:center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>:disabled Selector</h2>
<form action="">
Author Name: <input type="text" value="Geeks"><br>
College Name: <input type="text" value="GFG"><br>
Country: <input type="text" disabled="disabled"
value="India">
</form>
</body>
</html>
Producción:
Ejemplo 2:
<!DOCTYPE html>
<html>
<head>
<title>disable selector</title>
<style>
h1 {
color:green;
}
body {
text-align:center;
}
</style>
</head>
<body>
<h1>GeeksForGeeks</h1>
<h2>:disabled Selector</h2>
<select>
<option value="s1">Data Structure</option>
<option value="s2" disabled>Algorithm</option>
<option value="s3">Operating System</option>
<option value="s4" disabled>HTML</option>
<option value="s5">C programming</option>
</select>
</body>
</html>
Producción
Navegadores compatibles: los navegadores compatibles con :selector deshabilitado se enumeran a continuación:
- Apple Safari 3.2
- Google Chrome 4.0
- Firefox 3.5
- Ópera 9.6
- Internet Explorer 9.0
Más selectores:
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA