HTML5需要的輸入樣式

在HTML 5中，我們可以將輸入標記爲required，然後在CSS中使用[required]僞選擇器來選擇它們。但我只想在他們嘗試提交表單而不填寫所需元素時對其進行設計。有沒有這個選擇器？如何彈出小消息框？HTML5需要的輸入樣式

來源

2011-03-09 Xodarap

號。 – SLaks 2011-03-09 16:49:04

@SLaks：那是什麼意思？只要你喜歡默認的樣式，它會起作用嗎？ – Xodarap 2011-03-09 17:10:41

看到這個問題的更多信息http://stackoverflow.com/questions/5660177/styling-the-hint-on-a-html5-input-field-using-required-attribute – alpha1 2012-06-29 16:55:58

是的SLaks說沒有CSS選擇器來做到這一點。我懷疑這將永遠在CSS的範圍內，因爲CSS需要檢查輸入的內容。

你最好的選擇仍然是在點擊按鈕時調用一個javascript驗證函數，而不是實際提交表單。然後檢查適當的內容[必需]字段，或者提交表單或加亮所需的字段都沒有填寫。

JQuery的有照顧這對你 http://docs.jquery.com/Plugins/validation

來源

2011-03-09 17:03:15 NikoRoberts

你可以一些不錯的插件使用：有效和無效的選擇器。這樣

.field:valid { 
    border-color:#0f0; 
} 
.field:invalid { 
    border-color:#f00; 
}

東西但是，這隻會在支持本地驗證，只爲使感應場瀏覽器。據我所知，現在只是Chrome（可能是Safari，但沒有檢查過）。

因此，通過本地驗證，我的意思是說，如果您使用的是Chrome瀏覽器<input type="email">，則該字段的值將針對電子郵件類型字符串進行驗證（不包含任何其他JavaScript），因此上述樣式將起作用。但是，如果您將它們附加到type="text"字段或第二個密碼字段（假設與第一個字段相匹配），則只會變綠，因爲所有內容都是有效的，並且在密碼的情況下，沒有「鍵入「無論如何。

這基本上意味着支持所有的瀏覽器，更重要的是，更廣泛的驗證，你仍然必須求助於JavaScript，在這種情況下分配.valid/.invalid類應該不成問題。 :)

來源

2011-03-10 15:48:06 ilia

它看起來像我這些設置頁面加載，所以我遇到了與[[required]'相同的問題。 – Xodarap 2011-03-14 15:55:03

@Xodarap，它在頁面加載時設置，但輸入狀態從有效更改爲無效，所以這將工作得很好。 – Johan 2011-09-07 11:16:23

@Johan這樣做只會改變樣式之間的輸入變化之間（in）有效。不是Xodarp想要的 - 只有在點擊提交後才需要所有其他框的樣式... – will 2012-05-02 10:21:39

我已經訴諸使用JS來應用類的.validated就提交表單，然後使用類風格：無效fields.eg：

.validated input:invalid { ... }

這樣的字段不要在頁面加載時顯示爲無效，只有在提交表單後。理想情況下，會有一個pseodo類應用於提交表單。

來源

2011-04-13 22:32:35 Toby

你也可以做這樣的事情來允許實時驗證檢查： '$（'input [required]'） .on'keyup'， - > $（this）.addClass（'validate-me'）。off（'keyup'）' 然後爲'input [required] .validate-me：invalid'添加CSS樣式。 etc – Jayphen 2012-08-23 08:20:17

@Toby：順利，+1！ – 2013-11-07 02:33:03

CSS Selectors 4 working draft中有一個:user-error僞類，它將完成這一操作，觸發輸入模糊和表單提交。與此同時，我親自使用了真棒webshims polyfill library，其中涵蓋：用戶錯誤，或者你可以用Toby的答案來解決這個問題。

來源

2013-09-25 19:31:17

input:required { 
    /* Style your required field */ 
    /* Be sure to style it as an individual field rather than just add your desired styles 
    for a required field. */ 
}

在鉻中試過並測試過。我沒有在任何其他瀏覽器中測試過它。

來源

2014-01-06 19:09:20 JustSomeGuy

這是最好的答案！ – 2014-07-21 20:04:59

此解決方案將樣式輸入字段的樣式通過屬性而爲空。在keydown上填充必填字段時，瀏覽器將刪除：無效的僞類。 Firefox的最新版本自動應用類似於這種風格的東西，但Chrome和IE不支持。

input[required]:invalid { box-shadow: 0 0 3px 1px red }

嘗試：這需要Javascript http://jsfiddle.net/2Ph2X/

來源

2014-06-11 21:21:47 TaeKwonJoe

HTML5需要的輸入樣式

回答

相關問題