Match autofill fields look with Style applied

[AbdiTolesa]

Fix https://github.com/Strategy11/formidable-pro/issues/6393

Test steps

1. Create a form, add some fields and go to the form settings.
2. Under Form styles > Advanced > Field Colors section update the background colors for the default and Active states.
3. Save the styles and preview your form.
4. Try autofilling the form with previous values and confirm that the colors for focus and default states are applied as expected.

Before:

CleanShot.2026-03-24.at.14.09.29.mp4

After:

CleanShot.2026-03-24.at.14.08.11.mp4

Summary by CodeRabbit

• Style
  • Improved styling for autofilled form inputs so their background matches the app theme and remains consistent when focused. A long focus transition suppresses the browser's default autofill background, ensuring seamless visual integration across themed form fields.

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds CSS rules in css/custom_theme.css.php under .with_frm_style to style WebKit autofilled inputs: applies an inset -webkit-box-shadow using var(--bg-color) and adds a long transition on input:-webkit-autofill:focus to suppress the user-agent autofill background color.

Changes

Cohort / File(s)	Summary
Autofill Input Styling css/custom_theme.css.php	Adds .with_frm_style input:-webkit-autofill rule applying an inset -webkit-box-shadow using var(--bg-color) and $important, plus input:-webkit-autofill:focus with a long transition on background-color to suppress UA autofill background on focus.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Poem

🐇 I nudge the CSS, a gentle tweak,
Autofill shadows soft and sleek,
Backgrounds match without a fight,
Inputs glow in themed delight,
Hopping off — the form looks right! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Title check	❓ Inconclusive	The title is partially related to the changeset. It mentions matching autofill fields with Style, which aligns with the PR's objective, but contains incomplete phrasing ('with Style applied' appears to have formatting issues) and lacks clarity about the specific technical approach (hiding autofill background on focus).	Improve the title clarity by removing formatting issues and making it more specific. Consider: 'Hide autofill background color on focus to match Style' or 'Suppress autofill styling to align with form Style'.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch issue-6393

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[deepsource-io]

DeepSource Code Review

We reviewed changes in be364dd...1d96474 on this pull request. Below is the summary for the review, and you can see the individual issues we found as inline review comments.

See full review on DeepSource ↗

PR Report Card

Overall Grade

Security   Reliability   Complexity   Hygiene

Code Review Summary

Analyzer	Status	Updated (UTC)	Details
PHP		Mar 24, 2026 11:08a.m.	Review ↗
JavaScript		Mar 24, 2026 11:08a.m.	Review ↗

[coderabbitai]

🧹 Nitpick comments (1)

css/custom_theme.css.php (1)

231-233: Consider adding text color override for complete autofill styling.

The box-shadow technique correctly handles the background color override. However, browsers may also change the text color when autofilling. For complete styling consistency, consider adding -webkit-text-fill-color:

♻️ Suggested enhancement

 .with_frm_style input:-webkit-autofill {
 	-webkit-box-shadow: 0 0 0 30px var(--bg-color) inset <?php echo esc_html( $important ); ?>;
+	-webkit-text-fill-color: var(--text-color) <?php echo esc_html( $important ); ?>;
 }

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@css/custom_theme.css.php` around lines 231 - 233, Add a text color override
to the autofill rule so browser autofill doesn't change input text color: update
the .with_frm_style input:-webkit-autofill style handler to set
-webkit-text-fill-color to the intended foreground (e.g., var(--text-color) or
the same variable used for normal inputs) alongside the existing
-webkit-box-shadow rule to ensure both background and text use your theme
colors.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@css/custom_theme.css.php`:
- Around line 231-233: Add a text color override to the autofill rule so browser
autofill doesn't change input text color: update the .with_frm_style
input:-webkit-autofill style handler to set -webkit-text-fill-color to the
intended foreground (e.g., var(--text-color) or the same variable used for
normal inputs) alongside the existing -webkit-box-shadow rule to ensure both
background and text use your theme colors.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 42aedc05-d734-41c8-a393-c0bc16b328d1

📥 Commits

Reviewing files that changed from the base of the PR and between be364dd and 19090b8.

📒 Files selected for processing (1)

• css/custom_theme.css.php