Remove border on a specific field

Get Help
1

hello searched and haven’t found anything useful that works. I am trying to target just one form field that is to attach an image. It does not need a border like the rest of the fields have. I have tried this code after wtching a video… does’nt do anything.

.gform_wrapper .gform_body .gform_fields #field_23_1.gfield {
        border-top-style: hidden !important;
        border-right-style: hidden !important;
        border-left-style: hidden !important;
        border-bottom-style: groove !important;
        background-color: #eee;
      }

Anybody know how to do this? I want to remove the border boxes on just certain fields… target an exact field for it’s own css properties.

2

The custom CSS you have should work and it should target the field with an ID 1 on a Form with ID 23. How are you currently adding the CSS to the website/form? You can insert the CSS within an HTML field on the form and wrap the CSS codes with the tags.

1 Like
4

I had the same issue.
My solution was to define a class gf_noborder for each field type (below) in style.css and simply add the class to each field as required.

body .gform_wrapper .gform_body .gfield.gf_noborder div input[type=text],
body .gform_wrapper .gform_body .gfield.gf_noborder div input[type=number],
body .gform_wrapper .gform_body .gfield.gf_noborder div textarea {
  border-style: none;
  background-color: #ffffff;
}
1 Like