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