El selector :in-range se utiliza para seleccionar todos los elementos que se dan dentro de un valor de rango particular. Se utiliza principalmente en un elemento de entrada con atributo de tipo min/max.
Sintaxis:
:in-range {
// CSS property
}
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>in range selector</title>
<style>
h1 {
color:green;
}
input:in-range {
border: 1px solid black;
background:green;
color:white;
}
body {
text-align:center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>:in-range Selector</h2>
<!-- If selected number is less then 20 and greater then
40 then the CSS property of input elements will change. -->
Select Number: <input type="number" min="20" max="40">
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con :in-range selector se enumeran a continuación:
- Apple Safari 10.1
- Google Chrome 53.0
- Firefox 50.0
- Ópera 40.0
- Internet Explorer 13.0
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA