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

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.

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.

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  ⬇️

Thanks.  Makes sense.  I'm an old C++ programmer from way back when so I understand references and inheritance but I've not done much with CSS except dabble as I've been doing here.  Cheers.