自定义Jquery验证消息css

Question

如何在css中自定义Jquery验证消息

从此

对此：

我可以帮助我制作上述造型吗？

我尝试了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; }

但我无法正确对齐

由于

Answer 1

这样的事情：

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;
}

Answer 2

我认为很难自定义这样的默认错误消息。

您可以更好地为此进行自定义验证。即，而不是显示默认错误消息，您可以显示消息弹出窗口。因此，根据错误类型，您可以显示相应的弹出窗口。

在http://www.underdog.co.uk/

中可以看到类似的事情