Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Style elements with a value within a specified range with CSS
To style elements with a value within a specified range, use the CSS :in-range pseudo-class selector. This selector applies styles only when the input's value falls within the defined min and max attributes.
Syntax
input:in-range {
property: value;
}
Example: Basic In-Range Styling
The following example demonstrates styling a number input when its value is within the specified range −
<!DOCTYPE html>
<html>
<head>
<style>
input:in-range {
border: 3px dashed orange;
background-color: yellow;
padding: 5px;
}
input:out-of-range {
border: 3px solid red;
background-color: #ffcccc;
padding: 5px;
}
label {
display: block;
margin: 10px 0 5px 0;
font-weight: bold;
}
</style>
</head>
<body>
<label>Enter a number between 5 and 10:</label>
<input type="number" min="5" max="10" value="9">
<label>Enter a number between 1 and 100:</label>
<input type="number" min="1" max="100" value="50">
<p>Try changing the values to see the styling change when they go out of range.</p>
</body>
</html>
Two number input fields appear on the page. The first has a yellow background with orange dashed border (value 9 is within range 5-10). The second also has yellow background with orange dashed border (value 50 is within range 1-100). When values are changed outside the specified ranges, the inputs will display red borders with light red backgrounds.
Example: Range Input Styling
The :in-range selector also works with range input types −
<!DOCTYPE html>
<html>
<head>
<style>
input[type="range"]:in-range {
background: linear-gradient(90deg, #4CAF50, #45a049);
height: 8px;
border-radius: 5px;
}
.range-container {
margin: 20px 0;
padding: 20px;
border: 1px solid #ddd;
border-radius: 5px;
}
.range-value {
font-size: 18px;
font-weight: bold;
color: #333;
margin-left: 10px;
}
</style>
</head>
<body>
<div class="range-container">
<label>Volume (0-100):</label>
<input type="range" min="0" max="100" value="75" id="volume">
<span class="range-value">75</span>
</div>
</body>
</html>
A range slider appears with a green gradient background. The slider is set to value 75 within the range 0-100, displaying the styled appearance for in-range values.
Conclusion
The :in-range pseudo-class selector is useful for providing visual feedback when form inputs contain valid values within their specified ranges. It works with number and range input types and can be combined with :out-of-range for comprehensive form validation styling.
Updated on: 2026-03-15T12:10:40+05:30
201 Views
Advertisements