How can I remove the lines inside the textarea in my Webflow form?

Published on
September 22, 2023

To remove the lines inside the textarea in your Webflow form, you will need to apply some custom CSS styles. Here's how you can do it:

  1. Access the Webflow Designer: Login to your Webflow account and open your project in the Designer.

  2. Select the textarea element: Navigate to the page where your form is located and locate the textarea element that you want to remove the lines from. Click on the textarea element to select it.

  3. Open the Styles panel: In the right sidebar of the Designer, click on the paintbrush icon to open the Styles panel for the selected textarea element.

  4. Add a custom class: If you haven't already added a custom class to the textarea, do so by clicking the "New Class" button at the bottom of the Styles panel and assigning a unique class name to the textarea element.

  5. Apply custom CSS: With the textarea element selected and the custom class applied, scroll down to the "Custom CSS" section in the Styles panel. Here, you can add the following CSS code to remove the lines inside the textarea:

textarea.YOUR-CLASS-NAME {  border: none;  background: none;}

Replace "YOUR-CLASS-NAME" with the actual class name you assigned to the textarea element.

  1. Publish the changes: Once you have added the CSS code, click the "Publish" button in the top-right corner of the Designer to save and publish your changes to your live site.

By following these steps, you should be able to successfully remove the lines inside the textarea in your Webflow form.

Additional Questions:

  1. How do I edit the width of a textarea in Webflow?
  2. Can I change the font size in a textarea in Webflow?
  3. How can I customize the placeholder text in a textarea in Webflow?