Question

我需要你身边的帮助，实际上，我正在使用WordPress网站并最近创建了一个帖子。这个帖子工作正常。基本上有4个字段填写评论回复的表格;姓名，电子邮件，网站和评论。前3个字段是文本字段，最后一个是textarea字段。

当我要填写表单以进行回复时，名称，电子邮件，网站字段将被填充，不会有任何CSS干扰。但是当我点击评论框时，框的高度会降低。这是出现的主要问题。我不知道为什么这只发生在帖子评论字段部分。

/* When the posts page is refreshed and I inspected and found this CSS */

.comment-form textarea {
    background: #f7f7f7;
    border: 0;
    height: 106px;
    padding: 10px 20px;
    resize: none;
    width: 100%;
    border-radius: 2px;
    outline: none;
}

/* When I click on textarea field then CSS changes and what I found */

element {
    background: transparent none repeat scroll 0% 0% !important;
    z-index: auto;
    position: relative;
    line-height: 30px;
    font-size: 18px;
    transition: none 0s ease 0s;
}

'comment_field' =>  '<p class="comment-form-comment"><label for="comment">
            </label><textarea id="comment" name="comment" placeholder="' . esc_attr__( 'Comment', 'spa-and-salon' ) . '" cols="45" rows="8" aria-required="true">' .
            '</textarea></p>',

这是我发现的一些WordPress代码：

$args = array(
          'id_form'           => 'commentform',
          'class_form'      => 'comment-form',
          'id_submit'         => 'submit',
          'class_submit'      => 'submit',
          'name_submit'       => 'submit',
          'title_reply'       => esc_attr__( 'Leave a Reply', 'spa-and-salon' ),
          'title_reply_to'    => esc_attr__( 'Leave a Reply to %s', 'spa-and-salon' ),
          'cancel_reply_link' => esc_attr__( 'Cancel Reply', 'spa-and-salon' ),
          'label_submit'      => esc_attr__( 'POST COMMENT', 'spa-and-salon' ),
          'format'            => 'xhtml',

请帮助我，因为textarea的高度在点击之前和点击之后保持相同，以填补那里的任何回复。我们如何在WordPress中覆盖自动生成的CSS。帮助

注意：我认为element属性的backgorund（背景：透明无重复滚动0％0％！important;）会扰乱textarea的css

Answer 1

请试一试。

$(".comment-form textarea").css("cssText", "background: #f7f7f7 !important; height: 106px;");

Answer 2

这应该可以解决问题，

#comment:active{
background:none;
}

Answer 3

您可以使用!important覆盖!important的CSS属性，但新代码需要放在原始代码之下。

您当前的代码：

element {
    background: transparent none repeat scroll 0% 0% !important;
    z-index: auto;
    position: relative;
    line-height: 30px;
    font-size: 18px;
    transition: none 0s ease 0s;
}

考虑到以下代码放在CSS文件中原始/上面的代码下面，可以覆盖背景。

element {
    background: none !important;
}

现在，您遇到一个问题，点击时评论消息框字段的高度会降低，请尝试以下代码。 代码已更新

.comment-form textarea {
    min-height: 106px;
    background: none !important;
}

.comment-form textarea:active {
    min-height: 106px;
    height: 106px;
}

如果我猜对了，浏览器会添加element，所以只是放弃它并仅使用上面更新的CSS。

您可以使用插件Simple Custom CSS添加此CSS。

如何删除/覆盖标记为！important的元素属性的CSS

3 个答案: