wordpress - Wordpress 联系表 7 中带有红色边框的高亮字段

Question

我想通过 Wordpress Contact Form 7获得这种效果http://jquery.bassistance.de/validate/demo/ 。

我在css中设置

.wpcf7-not-valid{
    border:1px solid #d73333!important;
}

但是当我在字段中插入值时，红色边框不会消失。

Answer 1

得到了很好的解决方案。在 wp-content\plugins\contact-form-7\includes\js\scripts.js

改变了

$.fn.wpcf7NotValidTip = function(message) {
        return this.each(function() {
            var into = $(this);
            into.append('<span class="wpcf7-not-valid-tip">' + message + '</span>');
            $('span.wpcf7-not-valid-tip').mouseover(function() {
                $(this).fadeOut('fast');
            });
            into.find(':input').mouseover(function() {
                into.find('.wpcf7-not-valid-tip').not(':hidden').fadeOut('fast');
            });
            into.find(':input').focus(function() {
                into.find('.wpcf7-not-valid-tip').not(':hidden').fadeOut('fast');
            });
        });
    };

到这个代码

$.fn.wpcf7NotValidTip = function(message) {
        return this.each(function() {
            var into = $(this);

            $theParent = into.parent("span");
            $parentInp = $theParent.parent("input");

            into.find(':input').css('border-color', '#d73333');

            into.find(':input').mouseover(function() {
                into.find(':input').css('border-color','#cccccc');
            });
            into.find(':input').focus(function() {
                into.find(':input').css('border-color','#cccccc');
            });
        });
    };

Answer 2

.wpcf7-validation-errors, .wpcf7-mail-sent-ng {
padding: 5px;
color: #E68B8B;
background-color: #FDF5F8 !important;
border: 1px solid #FDE2E2 !important;
width: 518px !important;
}

Answer 3

没有通用的解决方案，因为这完全取决于您如何设置表单样式

无论如何，您可以尝试使用类似的东西：

span .wpcf7-not-valid {
    border: 1px solid #ff0000 !important;
}

注意：使用!important从来都不是使用 css 做任何事情的最佳方式