fix: checkbox styling in form builder#1844
Conversation
WalkthroughThis change adds CSS styling to display a white checkmark SVG as the background image for checked checkboxes in the form builder. The modification targets the checked state of checkbox inputs via the Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Possibly related PRs
Suggested labels
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/css/admin/form-builder.css`:
- Around line 356-358: The rule currently targets all checked checkboxes with
the global selector [type='checkbox']:checked; restrict it to the form builder
by scoping the selector to the form builder container
(`#wpuf-form-builder-settings`) so only checkboxes within that context get the
background-image; update the selector to a descendant rule such as
`#wpuf-form-builder-settings` [type='checkbox']:checked (keeping the same
background-image value) to preserve styling while avoiding global side-effects
and maintaining Tailwind/scoped preflight consistency.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 0e699ef9-3eec-46c1-8bbd-a8a2f866c808
📒 Files selected for processing (4)
assets/css/admin/form-builder.cssassets/css/ai-form-builder.cssassets/css/frontend/account.csssrc/css/admin/form-builder.css
| [type='checkbox']:checked { | ||
| background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e"); | ||
| } |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# First, verify the file exists and read the relevant lines
wc -l src/css/admin/form-builder.cssRepository: weDevsOfficial/wp-user-frontend
Length of output: 109
🏁 Script executed:
# Read the specific lines mentioned in the review
sed -n '350,365p' src/css/admin/form-builder.cssRepository: weDevsOfficial/wp-user-frontend
Length of output: 555
🏁 Script executed:
# Check for the .wpuf-input-checkbox class around lines 18-20
sed -n '15,25p' src/css/admin/form-builder.cssRepository: weDevsOfficial/wp-user-frontend
Length of output: 685
🏁 Script executed:
# Search for `#wpuf-form-builder-settings` in the codebase
rg '#wpuf-form-builder-settings' --type css --type scssRepository: weDevsOfficial/wp-user-frontend
Length of output: 103
🏁 Script executed:
# Search for global checkbox selectors and related rules
rg '\[type.*checkbox\]' --type css --type scss -A 2Repository: weDevsOfficial/wp-user-frontend
Length of output: 103
🏁 Script executed:
# Search for `#wpuf-form-builder-settings` in all file types
rg 'wpuf-form-builder-settings' --type html --type php --type js --type jsx --type ts --type tsxRepository: weDevsOfficial/wp-user-frontend
Length of output: 102
🏁 Script executed:
# Check entire form-builder.css to see context and other checkbox styles
grep -n 'checkbox' src/css/admin/form-builder.cssRepository: weDevsOfficial/wp-user-frontend
Length of output: 136
🏁 Script executed:
# Look at the HTML/template files for form builder structure
find . -name '*form*builder*' -type f | grep -E '\.(html|php|jsx|tsx)$' | head -20Repository: weDevsOfficial/wp-user-frontend
Length of output: 302
🏁 Script executed:
# Search for where form-builder.css is imported/used
rg 'form-builder.css' --type html --type php --type js --type jsx --type ts --type tsxRepository: weDevsOfficial/wp-user-frontend
Length of output: 102
🏁 Script executed:
# Search for wpuf-form-builder-settings in form-builder templates
rg 'wpuf-form-builder-settings' --type phpRepository: weDevsOfficial/wp-user-frontend
Length of output: 1488
🏁 Script executed:
# Read form-builder.php to understand structure
head -100 ./admin/form-builder/views/form-builder.php | cat -nRepository: weDevsOfficial/wp-user-frontend
Length of output: 7155
🏁 Script executed:
# Search for checkbox elements in form-builder templates
rg 'type.*checkbox' ./admin/form-builder/views/ --type php -B 2 -A 2Repository: weDevsOfficial/wp-user-frontend
Length of output: 1243
🏁 Script executed:
# Check if there are other stylesheets or if form-builder.css is global
rg 'form-builder.css' . --type php --type htmlRepository: weDevsOfficial/wp-user-frontend
Length of output: 358
🏁 Script executed:
# Look for where checkboxes are rendered to understand scope
rg '\[type=['\''"]checkbox' . --type php -A 3 -B 1Repository: weDevsOfficial/wp-user-frontend
Length of output: 1869
Scope this checked-checkbox rule to the form builder context.
Line 356 uses a global [type='checkbox']:checked selector that can unintentionally style any checked checkbox in the admin area, creating unintended side effects. The stylesheet uses Tailwind CSS (via @apply utilities), which requires scoped preflight and selector specificity. Scope this rule to #wpuf-form-builder-settings to maintain consistency with the scoped styling approach.
Suggested fix
-[type='checkbox']:checked {
+#wpuf-form-builder-settings [type='checkbox']:checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| [type='checkbox']:checked { | |
| background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e"); | |
| } | |
| `#wpuf-form-builder-settings` [type='checkbox']:checked { | |
| background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e"); | |
| } |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/css/admin/form-builder.css` around lines 356 - 358, The rule currently
targets all checked checkboxes with the global selector
[type='checkbox']:checked; restrict it to the form builder by scoping the
selector to the form builder container (`#wpuf-form-builder-settings`) so only
checkboxes within that context get the background-image; update the selector to
a descendant rule such as `#wpuf-form-builder-settings` [type='checkbox']:checked
(keeping the same background-image value) to preserve styling while avoiding
global side-effects and maintaining Tailwind/scoped preflight consistency.
1 participant
closes #1840
Description: Post Form >> Settings >> Posting control >> Post permission to Guest Post >> Select check Checkboxes >> Observe that the checkboxes are filling instead of showing tick marks.
Captured evidence:
Summary by CodeRabbit