自定義jQuery驗證消息的CSS

從這個 enter image description here

要這樣： enter image description here

我可以誰能幫助我產生上述的造型？

我試圖label.error { float: none; padding-left: .5em; vertical-align: top; background-color: #333; font-size: 10px; border: 1px solid #999; color: #FFF; display: none; -moz-border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius-bottomleft: 0; -moz-border-radius-topleft: 0; -webkit-border-bottom-left-radius: 0; -webkit-border-top-left-radius: 0; -moz-box-shadow: 0 0 6px #ddd; -webkit-box-shadow: 0 0 6px #ddd; white-space: nowrap; padding-top: 2px; padding-right: 10px; padding-bottom: 2px; padding-left: 5px; font-family: Arial, Helvetica, sans-serif; -moz-opacity: .90; filter: alpha(opacity = 90); opacity: .90; margin-left: 5px; margin-top: -2px; }

，但我不能正確對齊 enter image description here

感謝

來源

2012-07-16 skystar7

可以看到有哪些你到目前爲止已經試過？...和你做這個自己或者這是你使用的插件嗎？ – 2012-07-16 16:11:15

我使用的是http://docs.jquery.com/Plugins/Validation，我試過float：none; \t padding-left：.5em; \t vertical-align：top; \t background-color：＃333; \t font-size：10px; \t border：1px solid＃999; \t顏色：#FFF; \t display：none; \t -moz-border-radius：4px; \t -webkit-border-radius：4px; \t -moz-border-radius-bottomleft：0; \t -moz-border-radius-topleft：0; – skystar7 2012-07-16 16:17:39

-webkit-border-bottom-left-radius：0; \t -webkit-border-top-left-radius：0; \t -moz-box-shadow：0 0 6px #ddd; \t -webkit-box-shadow：0 0 6px #ddd; \t white-space：nowrap; \t padding-top：2px; \t padding-right：10px; \t padding-bottom：2px; \t padding-left：5px; \t font-family：Arial，Helvetica，sans-serif; \t -moz-opacity：.90; \t filter：alpha（opacity = 90）; \t不透明度：.90; \t margin-left：5px; \t margin-top：-2px;但我無法正確對齊 – skystar7 2012-07-16 16:17:46

事情是這樣的：

box { 
    padding: 5px; 
    background: black; 
    color: white; 
    border: 1px solid gray; 
} 
box:after { 
    content: ""; 
    position: absolute; 
    left: 20px; 
    bottom: 0px; 
    border-top: 10px solid black; 
    border-left: 10px solid transparent; 
    border-right: 10px solid transparent; 
    border-bottom: 10px solid transparent; 
}

來源

2012-07-16 16:10:52 dezman

我覺得這是很難自定義默認的錯誤這樣的消息。

它更好，你可以做這個自定義驗證。即不是顯示默認的錯誤消息，而是顯示消息彈出窗口。所以根據錯誤的類型，你可以顯示相應的彈出窗口。

類似的事情可以在此http://www.underdog.co.uk/

來源

2012-07-17 09:47:28

自定義jQuery驗證消息的CSS

回答

相關問題