Hello @ohtusabes
I suppose you’re referring to customizing the design of the checkbox or radio buttons. Yes, that’s possible.
Please watch the following video:
https://resources.developers4web.com/cff/tmp/2025/09/16/video_o.mp4
I used the following styles definition:
#fbuilder .cff-checkbox-field input{display:none !important;}
#fbuilder .cff-checkbox-field .dfield{display:flex !important;flex-wrap:wrap;gap:10px;}
#fbuilder .cff-checkbox-field .one_column{width:20%;border:2px solid #dadada;padding:10px;border-radius:5px;display:flex;align-items:center;justify-content:center;}
#fbuilder .cff-checkbox-field .one_column span{text-align:center;display:block;}
#fbuilder .cff-checkbox-field .one_column:has(input:checked){background:#1e7caf;border-color:#1e7caf;color:white;}
The plugin allows you to enter custom styles through the “Customize Form Design” attribute in the “Form Settings > Advanced Settings” tab.
Best regards.
Thread Starter
PB
(@ohtusabes)
Hi @codepeople2
Yes, you are almost replicating my idea. In fact, I’d like to control the style of each option, if possible. For example, in a dropdown with 4 options, each option should display a different background color.
Thanl you.
Hello @ohtusabes
Please watch the following video:
https://resources.developers4web.com/cff/tmp/2025/09/16/video-2_o.mp4
I used the style definition:
#fbuilder .cff-dropdown-field select option:first-child{background:#cae6ef;}
#fbuilder .cff-dropdown-field select option:nth-child(2){background:#fbeee5;}
#fbuilder .cff-dropdown-field select option:nth-child(3){background:#fad2d8;}
#fbuilder .cff-dropdown-field select option:nth-child(4){background:#f2c4d6;}
#fbuilder .cff-dropdown-field select option:nth-child(5){background:#dbc1e7;}
Best regards.
Thread Starter
PB
(@ohtusabes)
Hi @codepeople2
My intention is not only to change the background color of each option, but also to have each option displayed as a button, similar to what you did with the checkboxes.
Thank you very much.
Hello @ohtusabes
No, that’s not possible. The dropdown fields use SELECT tags; the HTML standard does not allow displaying the option tags in the select as buttons. In that case, you must use a radio button field or a checkbox.
Best regards.
Thread Starter
PB
(@ohtusabes)
HI @codepeople2
Okay. I used the following code for radio buttons, but it didn’t display like the checkboxes you showed:
fbuilder .cff-radiobutton-field input{display:none !important;}
fbuilder .cff-radiobutton-field .dfield{display:flex !important;flex-wrap:wrap;gap:10px;}
fbuilder .cff-radiobutton-field .one_column{width:20%;border:2px solid #dadada;padding:10px;border-radius:5px;display:flex;align-items:center;justify-content:center;}
fbuilder .cff-radiobutton-field .one_column span{text-align:center;display:block;} fbuilder .cff-radiobutton-field.one_column:has(input:checked){background:#1e7caf;border-color:#1e7caf;color:white;}
The page is the same: https://app.ucimhef.org/?cff-form=98
Thank you
Hello @ohtusabes
You missed some spaces and symbols in your CSS block of code. The correct is:
#fbuilder .cff-radiobutton-field input{display:none !important;}
#fbuilder .cff-radiobutton-field .dfield{display:flex !important;flex-wrap:wrap;gap:10px;}
#fbuilder .cff-radiobutton-field .one_column{width:20%;border:2px solid #dadada;padding:10px;border-radius:5px;display:flex;align-items:center;justify-content:center;}
#fbuilder .cff-radiobutton-field .one_column span{text-align:center;display:block;}
#fbuilder .cff-radiobutton-field .one_column:has(input:checked){background:#1e7caf;border-color:#1e7caf;color:white;}
Best regards.
Thread Starter
PB
(@ohtusabes)
Hi @codepeople2
I’m sorry for the delay; I haven’t been able to work with the form. I tested your codes, and yes—they do transform the radio buttons and checkboxes into buttons, but the layout remains the same. My goal is for the buttons to change color according to their value: 0 → light green, 1 → light yellow, 2 → light orange, and 3 → light red. Additionally, I want the hover effect to clearly indicate which button is selected. Is this possible?
Thanks in advance.
Hello @ohtusabes
Yes, that’s possible. Simply use a different color for each choice.
For example:
#fbuilder .cff-radiobutton-field input{display:none !important;}
#fbuilder .cff-radiobutton-field .dfield{display:flex !important;flex-wrap:wrap;gap:10px;}
#fbuilder .cff-radiobutton-field .one_column{width:20%;border:2px solid #dadada;padding:10px;border-radius:5px;display:flex;align-items:center;justify-content:center;}
#fbuilder .cff-radiobutton-field .one_column span{text-align:center;display:block;}
#fbuilder .cff-radiobutton-field .one_column:has(input[value="1"]:checked){background:green;border-color:green;}
#fbuilder .cff-radiobutton-field .one_column:has(input[value="2"]:checked){background:yellow;border-color:yellow;}
#fbuilder .cff-radiobutton-field .one_column:has(input[value="3"]:checked){background:orange;border-color:orange;}
#fbuilder .cff-radiobutton-field .one_column:has(input[value="4"]:checked){background:red;border-color:red;}
Please note the support service does not cover the implementation of the users’ projects. If you require us to implement a personalized design for your form, please contact us through the plugin website:
https://cff.dwbooster.com/customization
Best regards.
Thread Starter
PB
(@ohtusabes)
Hi @codepeople2
That’s great. Thank you so much.
