close



支援CSS3 以上

用法::invalid
說明:
用在input輸入框,要有type
會依type來驗証輸入值是否有效,
invalid 無效才套用樣式。
css定義:
input:invalid  {
     border: 5px solid red;
}
注意事項:

程式:
<!DOCTYPE html>
<html>
<head>
<title>css3 Selector invalid 套用樣式</title>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<style type="text/css">
input:invalid  {
     border: 5px solid red;
}
</style>
</head>
<body>
<form action="">
name: <input type="text" value=""><br>
數量1: <input type="number" min="5" max="10" value="1"><br>
E-mail<input type="email" value="myEmail"><br>
</form>
</body>
</html>

輸入無效值
圖1:


輸入有效值
圖2:





測試結束~
如果還不了解可參考:w3schools CSS Selector Reference


感謝~

 




 






 















其它文章

arrow
arrow
    創作者介紹
    創作者 PG Levin Li 的頭像
    PG Levin Li

    程式開發學習之路

    PG Levin Li 發表在 痞客邦 留言(0) 人氣()