Jump to content

How to vertically center text for radio options and checkboxes on forms?

Go to solution Solved by JamIsJam88,

Recommended Posts

I made the text for radio options and checkboxes on forms smaller than 1rem for aesthetic purposes. However, the text is not vertically aligned with the radios and checkboxes. I've tried the code below, but it doesn't work. How can I align the text vertically with the radios and checkboxes?

.sqs-block-form .field-list .option {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

Screenshot 2024-03-15 at 5.04.24 PM.png

Link to comment
  • Solution

I just figured it out. It's not the text that was not aligning with the radios and checkboxes. It was the radios and checkboxes themselves. Also, this code changes the colour of the fill when you select a radio or checkbox. I didn't like the default bright blue on Apple devices.

.sqs-block-form .field-list fieldset.checkbox input[type="checkbox"] {
  accent-color: #443A31;
  vertical-align: middle;
}
.sqs-block-form .field-list fieldset.radio input[type="radio"] {
  accent-color: #443A31;
  vertical-align: middle;
}

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.