css3中檢驗表單的required,focus,valid和invalid樣式
發(fā)布時間：2014-02-21 15:40:01 作者：佚名 
我要評論
我要評論HTML5的出現(xiàn)為我們提供一些屬性，不用編寫js和正則即可解決這個檢驗表單內(nèi)容required,focus,valid和invalid樣式，感興趣的朋友可以了解下本文
css3 提示只適用于高級瀏覽器：
Chrome
Firefox
Safari
IE9+
valid、invalid、required的定義
input:required, input:valid , input:invalid{border:0 none; outline: 0 none; -webkit-box-shadow:none; -moz-box-shadow:none; -ms-box-shadow:none; -o-box-shadow:none; box-shadow: none;}
過去驗證表單會通過js和正則去判斷填寫的內(nèi)容是否正確，如email的驗證。
HTML5的出現(xiàn)為我們提供一些屬性，不用編寫js和正則即可解決這個檢驗表單內(nèi)容。
:required
必須，那input不能為空的意思。
:valid
有效，即當填寫的內(nèi)容符合要求的時候觸發(fā)。
:invalid
無效，即當填寫的內(nèi)容不符合要求的時候觸發(fā)。
Chrome
Firefox
Safari
IE9+
valid、invalid、required的定義
復制代碼
代碼如下:input:required, input:valid , input:invalid{border:0 none; outline: 0 none; -webkit-box-shadow:none; -moz-box-shadow:none; -ms-box-shadow:none; -o-box-shadow:none; box-shadow: none;}
過去驗證表單會通過js和正則去判斷填寫的內(nèi)容是否正確，如email的驗證。
HTML5的出現(xiàn)為我們提供一些屬性，不用編寫js和正則即可解決這個檢驗表單內(nèi)容。
:required
必須，那input不能為空的意思。
:valid
有效，即當填寫的內(nèi)容符合要求的時候觸發(fā)。
:invalid
無效，即當填寫的內(nèi)容不符合要求的時候觸發(fā)。
相關文章
本特效是一組效果超酷的表單input輸入框聚焦CSS3動畫特效效果的代碼。這組特效共24種不同的聚焦動畫效果，歡迎下載使用2016-04-26CSS3 重置iphone瀏覽器按鈕input,select等表單元素的默認樣式
之前寫了一個登錄表單頁面，再iphone上測試遇到了一些奇怪的問題：表單中的input[type="submit"]按鈕在iPhone的safari瀏覽器下會出現(xiàn)圓角的情況；input[type="text"]文本輸2014-10-11CSS樣式控制實現(xiàn)IE提交表單記錄歷史點擊返回信息仍在
一個CSS樣式控制和一個META標簽即可實現(xiàn)IE提交表單記錄歷史,點擊返回信息仍在，需要的朋友可以參考下2014-05-21- 注冊表單而且還是iphone樣式的，怎么樣心動了吧，學好css3實現(xiàn)這個效果不是問題，接下來為大家詳細介紹下css3如何實現(xiàn)注冊表單的樣式，感興趣的你們可不要錯過了哈2013-03-20
- 網(wǎng)頁制作Webjx文章簡介：你是不是覺得自己的主頁不夠靚麗，想讓它有所改變呢？聽說過樣式表格嗎？就是CSS，它就是那個能讓你更為準確地控制網(wǎng)頁的東東。2009-04-02
CSS實現(xiàn)學生入學畢業(yè)檔案漂亮表單樣式特效源碼
CSS實現(xiàn)學生入學畢業(yè)檔案漂亮表單樣式特效源碼是一款使用的學生檔案記錄表單代碼，支持提交內(nèi)容時自動驗證手機號和郵箱，所屬院校是下拉列表式的可選擇，基礎水平根入學成2016-06-02
