jquery - 自定义 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/中可以看到类似的事情