close


支援CSS3 以上

用法：:valid
說明：
用在input輸入框，要有type
會依type來驗証輸入值是否有效，
valid 有效才套用樣式。

css定義：
input:valid  {
     border: 2px solid green;
}
注意事項：

程式：
<!DOCTYPE html>
<html>
<head>
<title>css3 Selector valid 套用樣式</title>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<style type="text/css">
input:valid  {
     border: 2px solid green;
}
</style>
</head>
<body>
<form action="">
name: <input type="text" value="levin"><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
    文章標籤
    css3 selector 套用 測試 valid input 有效值 css java 用法 程式 目錄 輸入
    全站熱搜
    創作者介紹
    創作者 PG Levin Li 的頭像
    PG Levin Li

    程式開發學習之路

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

    E-mail轉寄