Flinx Posted November 27, 2022 Posted November 27, 2022 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!
Solution iamdavehart Posted November 28, 2022 Solution Posted November 28, 2022 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; } Flinx 1 Dave Hart. Software/Technology Consultant living in London. buymeacoffee
Flinx Posted November 29, 2022 Author Posted November 29, 2022 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; } iamdavehart 1
iamdavehart Posted November 29, 2022 Posted November 29, 2022 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!) Flinx 1 Dave Hart. Software/Technology Consultant living in London. buymeacoffee
Flinx Posted November 30, 2022 Author Posted November 30, 2022 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? 🙂
iamdavehart Posted November 30, 2022 Posted November 30, 2022 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. Flinx 1 Dave Hart. Software/Technology Consultant living in London. buymeacoffee
taylahroberts1 Posted November 30, 2022 Posted November 30, 2022 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 Flinx 1
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment