Jump to content

How to Change Active Text Field Color in Form Block

Recommended Posts

Site URL: https://www.matey.app/support

Hi! I'm trying to figure out how to change the active text field color when typing in the text box in a Form Block. Currently, I changed the text field color to dark gray #262626, but when typing in it, it changes color to white. I've attached a screenshot below. How do I prevent this with CSS? My template is Stanton. Thanks in advance for your help! 

2132855272_ScreenShot2020-02-13at5_53_30PM.thumb.png.761a92e6cd95bcf2654fac9c022e99f9.png

Link to comment

Add to Home > Design > Custom CSS

.form-wrapper .field-list input:focus, .form-wrapper .field-list textarea:focus {
    background: black !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 7 months later...

Is it possible to custom code the colour of the border to change when the text field is active? 

So when unselected it remains black, but when active and typing in it the borders change to #fecb00

Home page:

Website: cookislandsecurity.squarespace.com
Password: security199

Link to comment
  • 1 year later...
On 10/14/2020 at 2:30 PM, creedon said:

@CIS Add the following to Design > Custom CSS.

.form-wrapper .field-list .field .field-element:focus {

  border-color: #fecb00 !important;
  
  }

Let us know how it goes.
 

Hi! 

The first part of this thread is exactly what I needed *awesome*. I tried this second part of the code but it hasn't worked on my end. The border around the active text boxes is still black (see below). I'd like them to be transparent. Any help would be appreciated!

Screen Shot 2022-07-15 at 10.19.02 pm.png

Link to comment
5 hours ago, OldLadyStudio said:

I tried this second part of the code but it hasn't worked on my end.

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

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.