The plugin interferes with all the theme checkboxes

Hello everyone. I have identified a plugin error. I communicate it so that it can be improved in future versions. The plugin interferes with all the theme checkboxes and other features by adding a checkbox next to others. The error is determined by the following:

I’ve just inspected the issue and found that the Blossom Recipe Maker targets fields pretty broadly, which is why it “attaches” to the Email Optin Form. Here’s the offending code it produces which causes the issue:
input[type=”checkbox”] + label {
display: inline-block;
position: relative;
margin-left: 40px;
margin-bottom: 0;
border-left: 1px solid rgba(0, 0, 0, 0.1);
padding-left: 20px;
padding-top: 10px;
padding-bottom: 10px;
}

input[type=”checkbox”] + label::before {
content: “”;
background-color: #fff;
background-image: url(data:image/svg+xml; utf-8, <svg xmlns=”http://www.w3.org/2000/svg&#8221; viewBox=”0 0 512 512″><path fill=”%23fff” d=”M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z”></path></svg>);
background-repeat: no-repeat;
background-size: 0;
background-position: center;
border: 1px solid rgba(0, 0, 0, 0.1);
width: 18px;
height: 18px;
position: absolute;
top: 15px;
left: -40px;
border-radius: 3px;
-webkit-transition: all ease 0.35s;
-moz-transition: all ease 0.35s;
transition: all ease 0.35s;
}

I’ve looked into the issue and found that the plugin offers no option to disable the offending code.
Further more the CSS code is set in such a way that it will interfere with any input checkbox field on site.
What I can do, using WordPress’ built-in plugin editor functionality is change the plugin’s blossom-recipe-public.css styling file and prefix the problematic style with the following:

div[id*=”br-recipe”]

This will make sure that the styles are applied only withing the confines of the plugin code. An update to plugin may possibly overwrite these changes, which will then have to be administered again. 👍
I’m afraid this would be the only way possible to allows the plugin to coexist peacefully with any form on the site.

So, just for your to able to track the changes made, I’ve replaced the following CSS code in blossom-recipe-maker/public/css/blossom-recipe-public.css, from line 579 to line 621… 👇
input[type=”checkbox”] {
display: none;
}

input[type=”checkbox”] + label {
display: inline-block;
position: relative;
margin-left: 40px;
margin-bottom: 0;
border-left: 1px solid rgba(0,0,0,0.1);
padding-left: 20px;
padding-top: 10px;
padding-bottom: 10px;
}

input[type=”checkbox”]:checked + label {
color: rgba(0,0,0,0.5);
}

input[type=”checkbox”] + label::before {
content: “”;
background-color: #fff;
background-image: url(‘data:image/svg+xml; utf-8, <svg xmlns=”http://www.w3.org/2000/svg&#8221; viewBox=”0 0 512 512″><path fill=”%23fff” d=”M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z”></path></svg>’);
background-repeat: no-repeat;
background-size: 0;
background-position: center;
border: 1px solid rgba(0,0,0,0.1);
width: 18px;
height: 18px;
position: absolute;
top: 15px;
left: -40px;
border-radius: 3px;
-webkit-transition: all ease 0.35s;
-moz-transition: all ease 0.35s;
transition: all ease 0.35s;
}

input[type=”checkbox”]:checked + label::before {
background-color: #1A84EE;
background-size: 12px;
border-color: #1A84EE;
}

… with the following:

div[id*=”br-recipe”] input[type=”checkbox”] {
display: none;
}

div[id*=”br-recipe”] input[type=”checkbox”] + label {
display: inline-block;
position: relative;
margin-left: 40px;
margin-bottom: 0;
border-left: 1px solid rgba(0,0,0,0.1);
padding-left: 20px;
padding-top: 10px;
padding-bottom: 10px;
}

div[id*=”br-recipe”] input[type=”checkbox”]:checked + label {
color: rgba(0,0,0,0.5);
}

div[id*=”br-recipe”] input[type=”checkbox”] + label::before {
content: “”;
background-color: #fff;
background-image: url(‘data:image/svg+xml; utf-8, <svg xmlns=”http://www.w3.org/2000/svg&#8221; viewBox=”0 0 512 512″><path fill=”%23fff” d=”M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z”></path></svg>’);
background-repeat: no-repeat;
background-size: 0;
background-position: center;
border: 1px solid rgba(0,0,0,0.1);
width: 18px;
height: 18px;
position: absolute;
top: 15px;
left: -40px;
border-radius: 3px;
-webkit-transition: all ease 0.35s;
-moz-transition: all ease 0.35s;
transition: all ease 0.35s;
}

div[id*=”br-recipe”] input[type=”checkbox”]:checked + label::before {
background-color: #1A84EE;
background-size: 12px;
border-color: #1A84EE;
}

Ideally, they should be able to correct this error in future versions of the plugin.

Greetings to all. I hope this helps more people and especially the developers of this great plugin.