Form markup important inline style should not override custom CSS
Ingo Steinke
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.
D
David Lower
As developers of a plugin, a paid plugin and service I might add, this is just criminal. Border-radius serves no purpose other than visual! Why on earth would you even make this an inline style and worse yet !important? I would say all inline styles should be removed completely, especially visual styles.