Create a Post
1
Form markup important inline style should not override custom CSS
Despite configuring MailPoet not to use custom styles, MailPoet still generates markup using inline styles in the subscribe form. To make it worse, some of those are “!important” making it impossible that style using only custom CSS, as inline + important always has the highest specificity. <input type="email" autocomplete="email" class="mailpoet_text" id="form_email_1" name="data[form_field_ZjdkNDhmMDU3NTRiX2VtYWls]" title="E-Mail-Adresse" value="" style="width:100%;background-color:#f1f1f1;border-style:solid;border-radius:40px !important;border-width:0px;border-color:#313131;padding:16px;margin: 0 auto 0 0;font-family:'Montserrat';font-size:16px;line-height:1.5;height:auto;" data-automation-id="form_email" placeholder="E-Mail-Adresse *" data-parsley-required="true" data-parsley-minlength="6" data-parsley-maxlength="150" data-parsley-type-message="Dieser Wert sollte eine gültige E-Mail-Adresse sein." data-parsley-errors-container=".mailpoet_error_email_" data-parsley-required-message="Dieses Feld wird benötigt."> Trying to override the border-radius property will not work, as we can see it gets striked through in the browser’s developer tools. border-radius: 0.625rem !important; Possible ugly workarounds: either not using MailPoet markup at all (might break functionality with any upcoming MailPoet update), or use JavaScript to override the elements’ styles on page load (ugly and defying any best practice, but probably still the lesser evil). Please add an option (or change the default behaviour) so that there is no “!important” declaration in any inline styles that are generated by MailPoet. Originally posted at https://wordpress.org/support/topic/form-markup-important-inline-style-overrides-custom-css/#post-16053204
0
Load More