CSS - 伪类 :out-of-range

上一页
下一页

CSS 伪类选择器 :out-of-range 表示一个 <input>元素，其值超出了受 min 和 max 属性限制的范围。

选择器 :out-of-range 非常有用，因为它向用户提供了有关字段当前值的视觉指示，即该字段超出了允许的值范围。

伪类 :out-of-range 只能应用于在范围限制中可以具有值或取值的元素。当没有此类限制时，称元素既不在范围内也不在范围外。

语法


:out-of-range {
	 	/* ... */	
}

CSS :out-of-range示例

下面是一个示例伪类 :out-of-range 


<html>
<head>
<style>
	 	input:in-range {	
	 	 	 background-color: beige;	
	 	 	 padding: 5px;
	 	 	 border: 2px solid black;
	 	}	

	 	input[type="number"]:out-of-range { 	
	 	 	 border: 2px solid red;
	 	 	 padding: 5px;
	 	}
	 	input:out-of-range + label::after {
	 	 	 content: "Sorry! Value is out of specified range.";
	 	 	 color: red;
	 	 	 background-color: aqua ;
	 	}

	 	p {
	 	 	 color: green;
	 	}
	 	</style>
	 	</head>
	 	<body>
	 	 	 <h2>:out-of-range pseudo-class example</h2>
	 	 	 <p>Enter a number in the range of 1 and 50.</p>
	 	 	 <p>	
	 	 	 	 	<input type="number" min="1" max="50" value="1" id="inrange">
	 	 	 	 	<label for="inrange"></label>
	 	 	 </p>
</body>
</html>
打印本页
上一页
下一页