Question

尝试在jquery.validate上设置错误输出的样式，并且我在css中使用Pseudo-elements没有取得任何成功。任何人都有任何成功造型错误框与顶部的箭头jquery.validate？可以使用常规CSS获取带有箭头的框，但不能使用jquery.validate？

使用http://cssarrowplease.com/获取CSS（下面的代码）。感谢

<style type="text/css">
label.error {
    float: none;
    color: red;
    padding: .8em;
    vertical-align:middle;
    font-size:12px;
    display: inline;
    font-style:normal;
    border: solid 1px #ccc;
    border-radius: 4px;
    background: #f8f8f8;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, .3);
}
label.error:after, label.error:before {
    bottom: 100%;
    left: 30%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

label.error:after {
    border-color: rgba(248, 248, 248, 0);
    border-bottom-color: #f8f8f8;
    border-width: 8px;
    margin-left: -8px;
}
label.error:before {
    border-color: rgba(204, 204, 204, 0);
    border-bottom-color: #ccc;
    border-width: 9px;
    margin-left: -9px;
}
</style>

Answer 1

您的代码失败的原因是您尝试将其应用于<label>元素。

code you've linked to正在将示例CSS应用于<div>元素，这与<label>完全不同。

使用the errorElement option强制jQuery Validate插件使用<div>元素而不是label。

$('#myform').validate({
    // your other options, rules, and callbacks
    errorElement: 'div'
});

不要忘记在所有CSS规则中将label.error更改为div.error。

您将需要div.error的特异性，因为该插件还将error类应用于输入元素。

修改

由于你自己承认，你“不是CSS的专家”，为什么重新发明轮子？您可以轻松地将jQuery Validate与Tooltip插件（如Tooltipster）结合使用，其中提供了所有困难的CSS工具提示。请参阅此question/answer和此demo。

CSS伪元素不能与我的标签元素一起使用

1 个答案: