Styling input checkbox border

I’m trying to style the input checkbox borders on https://liberateyourresearch.com/contact to be the same color and radius corners as my other input fields.

I found this:

.gform_wrapper.gravity-theme .gfield-choice-input

But I’m not sure how to style it. Is it “border-color” or just “color” for the borders of the input checkboxes? I can’t figure it out.

Hey Tony,

It’s not possible to have a border radius or border color, but you can use a CSS outline. You may try the following code in the child theme’s style.css file or in Appearance → Customize → Additional CSS to achieve the output like the following screenshot.

#gform_5 .ginput_container_checkbox input.gfield-choice-input {
  outline: 2px solid #005ca1;
  height: 20px;
  width: 20px;
  border-radius: 20px !important;
}

#gform_5 .ginput_container_checkbox .gchoice {
  margin: 8px 0 !important;
}

#gform_5 .ginput_container_checkbox .gchoice label {
  vertical-align: top !important;
}

Output:

Give it a try, and let me know how that goes! :smile:

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.