Custom CSS is not working for form fields

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.

Share a website URL? Page this is on?

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

@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;
  
}

@paul2009interestingly the CSS works in edit mode but not on the actual website 😞

@tuanphan thanks a lot! It worked!