Subscription Form has weird text highlighting.

Hi there @redeyedrocker ,

Thanks for reaching out here!

It looks like there might be some global styling on the site that is overriding the form styling.

If you are not sure where you have global styling set, can you please try conflict testing and see if this issue continues to happen?

• Switch the theme to Twenty Twenty-Three
• Deactivate all plugins except for MailPoet

Thank you!

@woonami

I have done the theme/plugins conflict test and the issue still persists.

same issue with me, text with different colors is showing in this yellow form

Hi there @redeyedrocker,

Thanks for doing the conflict test for us and confirming the issue persists.

I had a look at your form and the text with the yellow background is showing up as “highlight” text, meaning, it is marked with the <mark> HTML tag.

Please go into your MailPoet form and remove the highlight marker from this test. Here’s how:

• select/highlight the affected text
• in the pop-up menu across the top of the block, click the down arrow menu next to the “Link” icon and choose “Highlight” from the list

Full Size: https://d.pr/i/otf1PB

• then, on both the text and background tabs, click the “Clear” button to make sure all highlighting is cleared
• save the change to your form

Full Size: https://d.pr/i/sVNmh0

Please do let us know if that works for you.

@lynnjat7

Yes, the highlight is set but only for Text and not the Background. The issue is that it’s setting a Background highlight as well even though it’s cleared/set to none.

Hi there @redeyedrocker,

Thanks for confirming that. Looking again at your form, I’m seeing that the yellow background is coming from your user agent stylesheet:

Full Size: https://d.pr/i/rnwjIl

This is a default stylesheet that is built into your browser to provide basic styling to basic HTML markup tags. It overlays this styling over any website you visit. More on that here:

https://www.geeksforgeeks.org/what-is-a-user-agent-stylesheet/

Overriding or disabling that style sheet can be a challenge. I’d recommend inserting a custom CSS rule to your theme (for most WordPress themes, this would be under Appearance > Customize, then choose Custom CSS) that will force any highlighted text to not use the default coloured background.

CSS of this nature might look like this:

mark {
   background-color: transparent !important;
}

Please note that custom CSS of this nature is offered as a courtesy and would not be officially supported should you require additional help getting it to work with your theme.