使用js / jQuery / css替代！

Question

I'm trying to override a styling in gravity webforms in wordpress which is using !important

The code I'm trying to override is <label class="gfield_label" for="input_1_20">Street Name<span class="gfield_required">*</span></label>

CSS for that section is;

.gfield_label {
  margin: 10px 0 20px 0 !important;
  font-weight: bold;
  color: #000;
  display: inline-block;
  line-height: 1.2em;
  clear: both;
}

I would be happy to override everything with the class="gfield_label"

I have tried the following with no success;

one

jQuery('gfield_label').attr('style', 'margin: 15px 0 5px 0 !important;');

two

( '.gfield_label' ).each(function () {
    this.style.setProperty( 'margin', '15px', '0', '5px', '0', '!important' );
});

three

jQuery( ".gfield_label" ).css( "cssText", "margin: 15px 0 5px 0 !important;" );

four

label[for=input_1_20] .gfield_label {
    margin: 15px 0 5px 0 !important;
    }

I've tested jQuery on the site and it is working.

The custom CSS and jQ is loading at the bottom of the page, way after the links for the css files gravity forms uses.

Any help greatly appreciated!

Answer 1

Go to the settings of the plugin and switch "output css" to "No".

These guys must learn how to style. All their !importants made me a headache

Answer 2

You can easily override these using css by puttiing following code after <?php wp_footer(); ?> <?php wp_footer(); ?> in your footer.php

<style>
label[for=input_1_20] .gfield_label {
    margin: 15px 0 5px 0 !important;
}
</style>