Automattic / Automattic/jetpack

Form Block Multiple Choice Checkbox - Checkbox (Option Text) Color Not Reflected on Live Site

Open
#39,675 3 comments 0 reactions 1 assignee Claimed by @enejb View on GitHub
[Block] Form [Feature] Forms [Feature] Forms Blocks [Platform] Atomic [Platform] Simple [Plugin] Jetpack [Pri] Low [Status] In Progress Bug Customer Report [LEGACY] Triaged
Dominant language
PHP
Stars
1.8k
Forks
898
Avg merge
1d 18h
Merged PRs (30d)
774

Description

### Impacted plugin

Jetpack

### Quick summary

The checkboxes in the Multiple Choice (Checkbox) blocks in the Form block have the option to set a custom 'Option Text' color to update the color of the checkbox. This works while editing, but the live site still has the default colors.

Similar to this closed issue: https://github.com/Automattic/jetpack/issues/31397

### Steps to reproduce

1. Add Form with multiple choice (checkbox) options.
2. With the Multiple Choice (Checkbox) block selected, update the Option Text color in the Styles tab
3. Save changes. The color will apply in the Editor and page view, but will remain the default color on the live site.

![Image](https://github.com/user-attachments/assets/1b4693c0-08f9-46d1-9c9e-af3b8869f3c5)

### A clear and concise description of what you expected to happen.

I expect to be able to set the color for the checkbox, and that the color I set will be reflected on the live site.

### What actually happened

The preview in the backend works, but the checkbox on the live site remains the default color.

Editor View:
![Image](https://github.com/user-attachments/assets/0e109203-400e-4bad-a3a0-364901ca9ead)

Live Site:
![Image](https://github.com/user-attachments/assets/f484ecfc-3ef0-4aaf-b12f-5a1b6e9e70a7)

### Impact

Some (< 50%)

### Available workarounds?

Yes, easy to implement

### If the above answer is "Yes...", outline the workaround.

The following CSS can be updated with a different color/hex code and applied to the site:

/*Update Checkbox Color in Multiple Choice Form */
.contact-form .grunion-field-wrap input.checkbox-multiple {
color: #FFFFFF;
}

### Platform (Simple and/or Atomic)

Simple, Atomic

### Logs or notes

_No response_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.