How to remove/override the CSS of element property that is marked as !important

Question

I need a help from your side, Actually, I am working on WordPress website and created a post recently. The post is working fine. There are 4 fields basically to fill the form for the comment reply; Name, Email, Website, and Comments. First 3 fields are text fields and the last one is the textarea field.

When I am going to fill the form for a reply then name, email, website fields are filled without any CSS disturbance. But when I click on the comments box the height of the box is reduced. This is the main problem that arises. I don't know why this happens only in posts comments fields section.

 /* 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>', 

This is some WordPress code that I have found:

$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',

Please help me for that the height of textarea remains same before click and after the click to fill any reply over there. How we can override the autogenerated CSS in WordPress. Help?

Note: I think the backgorund (background: transparent none repeat scroll 0% 0% !important;) of the element property will disturb the css for the textarea

Answer 1

请尝试这个。

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

Answer 2

This should solve the problem,

#comment:active{
background:none;
}

Answer 3

You can override CSS properties of !important with !important but the new code need to be placed below the original one.

Your current code:

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

The background can be overridden as, considering the following code is placed below the original/above code in the CSS file.

element {
    background: none !important;
}

Now, you have an issue where the comment message box field's height is decreased when clicked, try the following code for that. Code Updated

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

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

If I may have guessed it right, element is added by browser so just ditch that and use the above updated CSS only.

You can add this CSS using the plugin Simple Custom CSS .