CSS :out-of-range 選擇器

admin發表於2019-04-03
CSS

此選擇器可以匹配值不在指定區間的表單元素。

有些表單元素可以通過min或者max設定最大值和最小值。

如果值不在min與max指定的區間之內，那麼此表單元素可以被選擇器匹配。

語法結構：

[CSS] 純文字檢視 複製程式碼
E:out-of-range { Rules }

瀏覽器支援：

（1）.IE瀏覽器不支援此選擇器。

（2）.edge瀏覽器支援此選擇器。

（3）.谷歌瀏覽器支援此選擇器。

（4）.火狐瀏覽器支援此選擇器。

（5）.opera瀏覽器支援此選擇器。

（6）.safria瀏覽器支援此選擇器。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
body{margin:20px;}  
input:out-of-range {
  background-color:#ccc;
} 
</style>  
</head>
<body>
<form action="#" method="post">
  <input type="number" min="5" max="10" value="18" />
  <br/>
  <input type="number" min="5" max="10" value="10" />
  <br/>
  <input type="submit" id="bt" value="提交表單"/>
</form>
</body>
</html>

第一個數字控制背景顏色會被設定為#ccc，第二個則不能。

因為第一個值不咋min與max設定的區間之內，第二個在區間之內。

相關文章