模仿HTML5表單驗證默認樣式

我有一個簡單的HTML5表單，包含所需的文件。當頁面加載字段沒有樣式。當我點擊必填字段時，鍵入內容然後刪除我剛輸入的文本並退出該字段，它會向我顯示Firefox中無效字段外面的粉色陰影。模仿HTML5表單驗證默認樣式

現在我需要黃色陰影，同時保留相同的行爲。這就是我所做的：

在HTML

<input name="email_address" id="email_address_uuid_479823574" type="email" 
     placeholder="ex. [email protected]" title="Email address" required /> 

     ------- 
     ------- 

<input name="model_number" id="model_number_uuid_479823574" type="text" 
     placeholder="ex. oxpd-983s" title="Equipment model number" required />

在CSS

input:required:invalid {box-shadow: 1px 2px 9px yellow};

結果：該頁面加載了所有與黃色的box-shadow的領域！而是等待用戶將錯誤onblur和onsubmit像默認行爲一樣提交。

如何覆蓋無效字段的默認方塊陰影而不更改行爲？

來源

2012-07-05 vulcan raven

嘗試：

input:required:-moz-ui-invalid {box-shadow: 1px 2px 9px yellow};

見https://developer.mozilla.org/en/CSS/:invalid

來源

2012-07-05 16:34:20 Esailija

感謝您的幫助。它適用於Firefox，但其他瀏覽器又如何？ Chrome和Safari中是否有這種僞選擇器？ – 2012-07-05 17:16:06

@JasonWilliams我認爲問題出在firefox – Esailija 2012-07-05 17:40:01

我也在其他瀏覽器中測試過。當然，該網站應該與*所有*瀏覽器兼容。 – 2012-07-05 17:49:03

模仿HTML5表單驗證默認樣式

回答

相關問題