This content originally appeared on DEV Community and was authored by Stacksjar
In this post we are going to check Css Selectors for input ranges. This selectors would not be known by many of us.
We all use input elements in our projects and must be aware of input type="number" this defines a field for entering number.
This allows in restricting user to enter any other character other than numbers. When we use the tag input and give its type attribute value of "number" as below
This input box comes with the 2 buttons on the right side which we can use to increase or decrease the number entered in the input.
We can set the min and max values for the number to be entered in the input as below
This will restrict the user to enter only numbers that are between 2 and 5 as we have specified in the min and max attributes of the input.
Now we can use the CSS Selector to detect if the user has not entered between the specified min and max values and apply css for the same.
//html
//css
input:in-range {
border: 1px solid green;
}
input:out-of-range {
border: 1px solid red;
}
The above css code will check all the values entered in the Input Box, If the number entered in the input box is not between the range specified by min and max values it changes the color of input box to red.
If the number entered is between the min and max values it will change the input box's color to green.
This was the usage of in-range and out-of-range css selectors, hope you find this usefull.
Checkout Complete Article Here: Psuedo Selectors for Inputs in Css
This content originally appeared on DEV Community and was authored by Stacksjar
Stacksjar | Sciencx (2021-07-20T06:22:28+00:00) Css Selectors for Input Ranges. Retrieved from https://www.scien.cx/2021/07/20/css-selectors-for-input-ranges/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.