Jump to content

Custom CSS is not working for form fields

Go to solution Solved by tuanphan,

Recommended Posts

Hi, I had a custom css to edit how the form fields looked like. Unfortunately it stopped working at some time.

Here's the code:

.form-wrapper .field-list .field .field-element {
  background-color: #fefefe;
  outline: 0;
  border-width: 0 0 1px;
  border-color: #0000FF;
}

Please help me figure it out.

Link to comment

Share a website URL? Page this is on?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
17 hours ago, MaciejZ said:

I had a custom css to edit how the form fields looked like. Unfortunately it stopped working at some time.

Squarespace changed the form block markup in May 2023 so your custom CSS will have stopped working because of this. The field-element class was removed so you'll want to refer to the input element instead. 

To get you started, this may solve the issue for standard text fields:

.form-wrapper .field-list .form-item.field input {
  background-color: #fefefe;
  outline: 0;
  border-width: 0 0 1px;
  border-color: #0000FF;
}

Other fields will require some additional CSS. For that, we'll need you to provide a link to the page on your site.

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

Edited by paul2009

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing 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 below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment

@paul2009 thanks a lot!

I fixed other field but the last issue I have is that I forced the menu to like like on mobile (burger) but it also stopped working. I mean it works but doesn't appear (is invisible).

Here's the link to the website:

https://theiconagency.pl/

Here's the code for the menu:

 

@media screen and (min-width:768px) {
  // Center logo
  .header-layout-branding-center-nav-center .header-title-nav-wrapper {
  display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex: 0 0 100% !important;
    justify-content: center;
    align-content: center;
    margin-left: auto;
}
  
  /* hide navigation */
    .header-nav {
    display: none;
}
  /* Hide header button */
	.header-actions {
    display: none;
}
	/* show burger */
	.header-burger {
  	display: flex;
}
/* Show overlay mobile menu */
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
  }
}

section[data-section-id="63614429c2905078dae8ec86"] {
  .desktop-arrows, .mobile-arrows {
    display:none !important;
  }
}



.gallery-reel-item img{

  }


.gallery-reel-item-src {
 margin-right: 50px;
  
}

 

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.