CSS targeting form/newsletter has broken "checkbox" function.

The code targeting the formatting forms/newsletters are working but the it has broken the checkbox function that was working correctly prior to the code.

1. How can we fix this in a way that maintains the current format and styling of the form while allowing the checkbox to work properly?

2. How can we close the vertical spacing of each form field to match how the (3) newsletter form fields are spaced?

All Current Code targeting forms and newsletters:

.newsletter-form-field-element {
  outline: none !important;
}

.form-wrapper .field-list textarea, .form-item input, .newsletter-block .newsletter-form-field-element {
  font-size: 15px !important;
  background-color: #FFFFFF !important;
  border: 0px solid #FFFFFF !important;
  letter-spacing: .05em;
  border-radius: 0px !important;
}

.form-wrapper .react-form-contents .field-list .title .required, .form-wrapper .react-form-contents .field-list .fields .description.required {
  display: none;  
}

14 minutes ago, Lesum said:

input[type='checkbox']:checked {
	background: black !important;
}

section[data-section-id="64bee613d3b415076f85d135"] label {
	display: none !important
}

.option label {
	display: block !important;
}

@ccxwoodHere's a code snippet to fix the issues. Let me know if it works. Thanks!

The code affects the first 4 form fields great, but it seems though that this code now hides the checkbox option all together.

@ccxwood try again. I updated it.

2 minutes ago, Lesum said:

@ccxwood try again. I updated it.

Perfection, Thank you!

The issue is because you've assigned a background color of white to checkboxes.

.form-wrapper .field-list textarea, .form-item input, .newsletter-block .newsletter-form-field-element {
  font-size: 15px !important;
  background-color: #FFFFFF !important; /* this is a problem */
  border: 0px solid #FFFFFF !important;
  letter-spacing: .05em;
  border-radius: 0px !important;
}

I'm also concerned when I see a lot of !important being used. That can indicate improper targeting of selectors. Overuse of !important can cause issues down the road and can increase difficulty of maintenance.

Remove previous attempts at this effect, make a copy somewhere.

Add the following to Website > Website Tools > Custom CSS.

.form-field-shape-square.form-field-border-all .sqs-block-form .form-item:not( .checkbox ) input,
.form-field-shape-square.form-field-border-all .sqs-block-form .form-item textarea

  {
  
    background-color : white;
    
    }
    
.form-field-shape-square.form-field-border-all .sqs-block-form .form-item input,
.form-field-shape-square.form-field-border-all .sqs-block-form .form-item textarea

  {
  
    border : unset;
    
    }

.form-item input,
.form-wrapper .field-list textarea,
.newsletter-block .newsletter-form-field-element

  {
  
  font-size : 15px !important;
  letter-spacing : 0.05em;
  
  }

Let us know how it goes.

@Lesum Hello! thank you, I had the same issue. I used the code you answered in a different question for removing the space between form fields, but then my checkboxes were removed. (I want to use my checkbox as a requirement to submit a form, as a way for the customer to acknowledge my refund policy). Everything was ok, but when I toggle on the "required" option it adds an extra blank space between this check box and the rest of the form fields. 

I also have a code to make the "required" word invisible, so it probably may be related to that?

Thank you!

@dnnlucia The code I provided in another post is likely the cause of the issue, as I didn't account for the checkbox in that code. Could you please try to insert this block of code after the previously added code? 

.option label {
	display: block !important;
}

If the issue isn't resolved, please feel free to share your site URL, so I can investigate further. Thanks!

@Lesum I tried this new code and it didn't work, this is my website https://www.theinbloomstudio.com and the password is lemonsherbet

Thank you!

@dnnlucia Try this code snippet:

#checkbox-0636a51e-1595-4007-b216-42d695633b03 legend.title {
    display: none !important;
}

@Lesum  yes!! it worked perfect. Thank you so much!!

Just another question: is it possible to add weight to the font of the placeholders on the form fields? It is too light and I'd like it to be bold or medium.

Thanks again!!

@dnnlucia you can use this CSS to change placeholders weight

input::placeholder, textarea::placeholder {
    font-weight: 600 !important;
}