CSS Code Stopped Working

Hello, everyone! 

I've been working on my page for almost a month, and while tweaking some of the last things I found out that the CSS code I had to customize a contact form is no longer working properly.

The code for the form submit button is the one that just stopped working.

.form-wrapper input[type=submit] {
  color: #c9c9c9 !important;
  background-color: #1e1e1e !important;
  font-family: Anita !important;
  font-size: 10px;
  text-transform: uppercase !important;
  border: 2px solid #c9c9c9 !important;
} 

.form-wrapper input[type=submit] {
  transition: all .6s ease 0s !important;
}

.form-wrapper input[type=submit]:hover {color: #1e1e1e !important;
  background-color: #c9c9c9 !important;}

I created a new website just to try that original code by itself and it just doesn't work anymore. I also tried making a copy of my website and restoring all color, font and button options to default and leaving just the code for the submit button and it also doesn't work anymore. 

I read in another discussion that it may be Squarespace's problem. So it makes me wonder. Does this happen regularly? Should I be scared that at any moment my code will just stop working and I'll have to redo everything? 

After trying all evening I think I solved the problem by changing the 

.form-wrapper input[type=submit]

part of the code to

.sqs-block-form .sqs-editable-button.sqs-button-element--primary, .site-wrapper .sqs-block-form .sqs-editable-button

in the first two blocks, and with

.primary-button-style-outline .sqs-block-form .sqs-editable-button.sqs-button-element--primary:hover

for the hover section of the code. 

Basically the new code would look like this:

.sqs-block-form .sqs-editable-button.sqs-button-element--primary, .site-wrapper .sqs-block-form .sqs-editable-button  {
  color: #c9c9c9 !important;
  background-color: #1e1e1e !important;
  font-family: Anita !important;
  font-size: 10px;
  text-transform: uppercase !important;
  border: 2px solid #c9c9c9 !important;
}
.sqs-block-form .sqs-editable-button.sqs-button-element--primary, .site-wrapper .sqs-block-form .sqs-editable-button  {
  transition: all .6s ease 0s !important;
}

.primary-button-style-outline .sqs-block-form .sqs-editable-button.sqs-button-element--primary:hover {color: #1e1e1e !important;
  background-color: #c9c9c9 !important;}

Making the button change from A to B, as it should. Don't mind the language. 

I'm not an expert in this, I just started and this is my first website, so I'm not sure if this is a correct or permanent way of soliving the problem/coding or if it even will work for everyone.

I used the Google dev tools to get the new elements for the code and I tried it in both my site, with all the rest of my code, and with a new site I used as a canvas to experiment. 

Has any of you ever encountered this problem? Is there a way to fix it?

Thank you everyone! 🙂

Nice work fixing it 😊

Unfortunately this will happen sometimes if Squarespace makes updates to certain parts of the code in the back end. They recently updated the form blocks so this is likely what caused this issue for you.

Hello, Cass. Thank you for answering. It's sad to know that it will happen from time to time, but at least I think I've learned enough to solve the problems somewhat by myself.

At least I hope this post can help others in their journey with Squarespace.

I also found out I messed up a little. Apparently, the code for the hover part as I published it only worked on my blank canvas & not on my real website.

The full code along with the new hover section is this one:

.sqs-block-form .sqs-editable-button.sqs-button-element--primary, .site-wrapper .sqs-block-form .sqs-editable-button  {
  color: #c9c9c9 !important;
  background-color: #1e1e1e !important;
  font-family: Anita !important;
  font-size: 10px;
  text-transform: uppercase !important;
  border: 2px solid #c9c9c9 !important;
}
.sqs-block-form .sqs-editable-button.sqs-button-element--primary, .site-wrapper .sqs-block-form .sqs-editable-button  {
  transition: all .6s ease 0s !important;
}

.prim.sqs-block-form .sqs-editable-button.sqs-button-element--primary, .site-wrapper .sqs-block-form .sqs-editable-button:hover {color: #1e1e1e !important;
  background-color: #c9c9c9 !important;}

This tells me that not all of it will be useful for everyone. You might need to change the 

.sqs-block-form .sqs-editable-button.sqs-button-element--primary, .site-wrapper .sqs-block-form .sqs-editable-button

  and

.prim.sqs-block-form .sqs-editable-button.sqs-button-element--primary, .site-wrapper .sqs-block-form .sqs-editable-button:hover 

parts of the code specific to your page.