Jump to content

How to Change Font Size in Text Area Box in Survey Form

Go to solution Solved by EagleHeart,

Recommended Posts

I've put together a simple survey form as you can see at the URL above.  I have two problems.  First, I want to make the fonts for the options in the radio buttons a bit bigger (red arrow in the image).  Second, I want to make the text in the text area response box smaller (yellow arrow).  

I'm on Version 7 and I can't find anything in the design panels that would allow me to make a font size change.  Advice much appreciated.

Thank you.

2023-05-10_13-44-20.png

Link to comment

Well... I've figured out part of the answer.  To change the font size in the radio button options:

/* form block - resize radio button fonts */
.form-wrapper .field-list .radio .option {font-size: 16px}

Still trying to find the correct variable for the textarea input font.  I've tried this code but it changes both the input box font size and the label/text font size, and I don't see any obvious lower level.

/* form block - resize input text */
.form-wrapper .field-list .textarea {font-size: 12px}

Appreciate any input.

Edited by EagleHeart
Add more info.
Link to comment
  • Solution

Well folks, just goes to show you that I don't know much about CSS syntax, and this code snippet works.

/* form block - resize input text */
.form-wrapper .field-list textarea  {font-size: 16px}

The difference is that I removed the period preceding "textarea".  If anyone can explain this to me, I'd appreciate it.

TIA.

Link to comment
On 5/11/2023 at 6:14 PM, EagleHeart said:

The difference is that I removed the period preceding "textarea".  If anyone can explain this to me, I'd appreciate it.

Squarespace engineers just rolled out a new Form Block (May 2023) that uses a different technology and therefore uses different markup and different classes. If you check posts prior to May 2023 that refer to CSS and forms, they're likely to be out of date.

Regarding your CSS and "textarea", let me try to explain.

In CSS, you specify which elements to affect by using "selectors". They are like patterns that are used to determine which element(s) to style. They can classes, IDs, HTML tags, attributes and so on.

When you refer to a class in CSS, you must prefix it with a dot. So the field-list class would be .field-list

In the new forms, there is a <textarea> HTML tag that defines an element used to collect multi-line text input to collect user inputs like comments or reviews. Because <textarea> is a tag, it shouldn't be prefixed with a dot.

The same would be true if you wanted to affect other elements by their tag, such as a heading like <h1> or a paragraph like <p>. You'd just use h1 or p.

Let me know if that helps 🙂

Did this help? Please give feedback by clicking an icon below  ⬇️

 

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

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.