Shulou(Shulou.com)06/01 Report--

This article mainly introduces "css3: out-of-range and: in-range pseudo-classes". In daily operation, I believe many people have doubts about how to use css3: out-of-range and: in-range pseudo-classes. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts of "css3: out-of-range and: in-range pseudo-classes"! Next, please follow the editor to study!

Css3:in-range pseudo class

In-range pseudo-class selector, which is used to style elements that have a range limit when the value of the element binding is within the specified range limit

In other words, you can style matching elements when their value attribute values are within their specified range limits.

Css3:out-of-range pseudo class

The out-of-range pseudo-class selector, which specifies the style to be used when the valid value of the element is limited to a range using the min and max attributes, but the actual input value is outside that range

Note: both the in-range pseudo-class selector and the out-of-range pseudo-class selector act only on elements that can specify interval values; you cannot select any other elements that do not have a data range or are not form control elements. For example, the min and max attributes in the input element:

Such input will have a range of acceptable values specified using the min and max properties. The value property saves the current value entered.

Description:

Like other pseudo-class selectors,: in-range pseudo-classes and: out-of-range can be used in conjunction with other selectors, such as hover and: focus selectors, which provide a hover style for an element when its value is within the allowable range limit, and a focus style for an element when its value exceeds the allowed range limit.

Input:in-range:hover {

Cursor:help

}

Input:out-of-range:focus {

Border:2pxsolidtomato

}

Examples of css3:in-range pseudo classes and: out-of-range pseudo classes:

The following example uses: out-of-range and: in-range pseudo-class selectors to style input when the values provided are within or outside the specified range. Try entering a value that is outside the specified range to see if the style you entered has changed.

Html Code:

If the values are less than 1 and 10, the style is green, but as long as the values are outside 1 and 10, the style will be red. Try changing the value to a value in the WITIN range to see its style changes.

Css Code:

Body {

Background-color:#F5F5F5

Color:#555

Font-size:1.1em

Font-family:'HelveticaNeue',Helvetica,Arial,sans-serif

}

.container {

Margin:40pxauto

Max-width:700px

}

Input {

Width:100px

Height:40px

Font-size:1.4em

Margin-right:.6em

}

Input [type= "number"]: in-range {

Background-color:lightgreen

Color:green

}

Input:in-range+label::after {

Content: please enter a value between 1 and 10!

}

Input [type= "number"]: out-of-range {

Background-color:salmon

Border:1pxsolidtomato

Color:white

}

Input:out-of-range+label::after {

Content: "this value is out of range, please re-enter it!"

Color:tomato

}

At this point, the study on "css3: how to use out-of-range and in-range pseudo-classes" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.