Jump to content

Styling formblocks

Go to solution Solved by iamdavehart,

Recommended Posts

Hi there amazing community,

Password: Suikido


I hope to find some help for styling form blocks.

1) Color: I would like to change the color of the checkboxes from their excisting blue (I can see this issue has been raised here in the forum, but I havn't managed to find a solution that worked on my site yet.)

 

2) Sizing: I would like to target the title text for checkboxes and make that larger ("I want to request"). When I use "form-wrapper .field-list .title" I also target titles in text-fields etc. Can I target the title for just checkboxes?

Thanks a lot! 

image.thumb.png.719541b419db08a13a1e4be50bfe7971.png

Link to comment
  • Solution

for the background you've got a couple of options. simplest is to change the accent-color property, more complex way is to set appearance to none and style the checkboxes however you want

/*
simplest version
*/
.sqs-block-form .field-list fieldset.checkbox input[type="checkbox"] {
    accent-color: purple;
}

/* 
alternative version here but commented out. don't add both of these together,
try the accent one first and if you want to go further try this
*/
/*
.sqs-block-form .field-list fieldset.checkbox input[type="checkbox"] {
    appearance: none;
    width: 16px;
    height: 16px;
    background: red !important;
    border-radius: 2px;
    border: solid 1px white;
}
.sqs-block-form .field-list fieldset.checkbox input[type="checkbox"]:checked {
    background: blue !important;
}
*/

for styling the legend titles but only for checkboxes use the rule:

/*
this is more specific than squarespaces normal rule for colour so you don't
need !important, but for font-size there is a rule that's already been 
marked !important so you need it then
*/
.sqs-block-form .field-list fieldset.checkbox legend.title {
	color:blue;
	font-size: 2rem !important;
}

 

Dave Hart. Software/Technology Consultant living in London. buymeacoffee 

Link to comment

Dave, you made my day! Thank you so much! It all worked perfectly!

One last question - I also want to target the title of text-areas like we did on the check-boxes but I cannot guess the name, I've tried text, text-area, textarea - but it doenst work;

 

.sqs-block-form .field-list fieldset.text legend.title {
    color:#008E8E;
    font-size: 2rem !important;
}

Link to comment

text fields are not put in a fieldset as they don't get grouped.

.sqs-block-form .field-list div.field.textarea .title,
.sqs-block-form .field-list div.field.text .title {
    color:#008E8E;
    font-size: 2rem !important;
}

(btw, please could you mark the post that contained the answer to the original post as the solution, it helps people answering the questions - or looking for answers!)

Dave Hart. Software/Technology Consultant living in London. buymeacoffee 

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.