支援CSS3 以上
用法：:in-range、:out-of-range
說明：
輸入框屬性有設定區間值。
不在此區間套用樣式
css定義：
input:in-range {
border: 2px solid green;
}
input:out-of-range {
border: 2px solid red;
}
注意事項：
程式：
<!DOCTYPE html>
<html>
<head>
<title>css3 Selector in-range、out-of-range 總合應用 套用樣式</title>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<style type="text/css">
input:in-range {
border: 2px solid green;
}
input:out-of-range {
border: 2px solid red;
}
</style>
</head>
<body>
<form action="">
name: <input type="text" value=""><br>
<p>輸入值為 5 ~ 10</p>
數量1: <input type="number" min="5" max="10" value="1">
<p></p>
數量2：<input type="number" min="5" max="10" value="7">
</form>
</body>
</html>
圖1：
測試結束~
如果還不了解可參考：w3schools CSS Selector Reference
感謝~
其它文章
沒有留言:
張貼留言