Jump to content

Styling formblocks

Go to solution Solved by iamdavehart,

Recommended Posts

Posted

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

  • Solution
Posted

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 

Posted

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;
}

Posted

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 

Posted

Worked perfectly yet again, thanks!

 

Yes - however I cannot find where to mark it as solved, where do I do that? I've upvoted and liked it - is that enough? 🙂

Posted

if you're the author of a post then you can click the tick/check mark just above the upvote button which will mark the post as the "best" answer for the original question. if not no worries. good luck with the rest of your site design.

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

Posted

HI @iamdavehart - I have a Q about the form block checkbox styling too and thought I'd tag onto this thread instead of making a new one. I'm wanting to change the font for both the select dropdown and the ones next to the checkboxes (see attached). Please let me know if you can help! Thanks in advance 🙂

site: emmett.world
password: hello
 

Screen Shot 2022-11-30 at 3.08.14 pm.png

Screen Shot 2022-11-30 at 3.08.36 pm.png

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.