CSS - injected/inlined style scope

[vonscriptor]

What happened?

I'm using the Basic Light theme and the injected <style> targets:

1. html
2. body
3. *
4. button
5. button:only-child
6. button:last-child
7. button:hover
8. button:disabled

...which can override other styles. The rest use .freeform- classname prefixes or freeform attributes properly.

For example, I noticed on Windows Chrome my own body font-family is being overridden by Freeform's <style> html, body { font-family: sans-serif } [...]. This issue happens with button elements too, and can be more or less obvious depending on the OS and browser where things like a sans-serif typeface and button appearance look very different—why I hadn't noticed the issue on my macOS Chrome as it looks more similar. If I were to try overriding Freeform's injected styling then it would be problematic (e.g. use of !important etc).

It doesn't seem apparent to me as to why such broad level targets are needed. Could the list of problematic style targets mentioned above be changed to and/or appended with [data-freeform] so that it doesn't leak into other areas please?

Errors and Stack Trace (if available)

No response

How can we reproduce this?

1. Create a Freeform form that uses Basic Light.
2. Use render() to output the form on a page.
3. Include your own CSS with a font-family for the body.
4. See that Freeform's <style> html, body { font-family: sans-serif; } is overriding your own.

Freeform Edition

Pro

Freeform Version

5.1.19.1

Craft Version

Craft Pro 4.9.2

When did this issue start?

Unsure

Previous Freeform Version

No response

[kjmartens]

Sorry about this @vonscriptor, and thanks for pointing it out.

I've committed changes for it now and they'll be included in the next release. 🙂

[vonscriptor]

Thank you! I appreciate the quick resolution as always.

[kjmartens]

This is now resolved in Freeform 5.3.0+ 🙂