El selector :indeterminate en CSS se usa para seleccionar cualquier elemento de formulario que esté en un estado indeterminado, es decir, un estado que no está ni marcado ni no marcado.
Los elementos a los que se dirige este selector son:
- <input = “checkbox”> elementos cuya propiedad indeterminada se establece en verdadero por JavaScript
- Elementos <input = “radio”>, cuando todos los botones de radio con el mismo valor de nombre en el formulario no están marcados
- <progress> elementos en un estado indeterminado
Ejemplo 1:
<!DOCTYPE html>
<html>
<head>
<title>
CSS :indeterminate selector
</title>
<style>
input:indeterminate + label {
background: green;
color: white;
padding: 4px;
}
input:indeterminate {
box-shadow: 0 0 1px 1px green;
}
</style>
</head>
<body style="text-align: center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2>
CSS :indeterminate selector
</h2>
<div>
<input type="checkbox" id="checkbox">
<label for="checkbox">This is an indeterminate checkbox.</label>
</div>
<br>
<div>
<input type="radio" id="radio" name="abc">
<label for="radio">This is an indeterminate radio button.</label>
</div>
<script>
var doc = document.getElementsByTagName("input");
for (var i = 0; i < doc.length; i++) {
doc[i].indeterminate = true;
}
</script>
</body>
</html>
Producción:
Ejemplo-2:
<!DOCTYPE html>
<html>
<head>
<title>
CSS :indeterminate selector
</title>
<style>
progress:indeterminate {
opacity: 0.5;
background: lightgray;
box-shadow: 2px 2px 4px 4px green;
}
</style>
</head>
<body style="text-align: center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2>
CSS :indeterminate selector
</h2>
<p>An indeterminate progress bar.</p>
<progress>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con :selector indeterminado se enumeran a continuación:
- safari de manzana
- Google Chrome 39.0
- Firefox 51.0
- Ópera
- explorador de Internet
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