CSS styles breaking on contact form

Hello, I've introduced some custom CSS to the contact form. It works when I'm on the Squarespace editor but they break on the browser URL with the text fields becoming black (they should be white).

Does anybody know what's happening?

My site, running on 7.1 https://pelican-chiton-xwy4.squarespace.com/contact

Cheers,

Xavi

Which CSS did you use?

On 1/24/2020 at 6:34 AM, tuanphan said:

Which CSS did you use?

This is what I've used @tuanphan do you see anything that might be causing this issue in there? Thanks

#email-yui_3_17_2_1_1555014059115_8408-field {
  padding: 16px 0px;
}
.form-block input {
    border-color: #000000 !important;  
  margin: 0px 0px;
}
.form-block textarea {
    border-color: #000000 !important;
   margin: 8px 0px;
      }
.form-block button {
    background: #000000 !important;
    border-color: #000000 !important;
}

.form-wrapper .field-list .field .field-element {
    width: 100%;
    padding: 18px !important;
    margin: 8px 0px 4px;
    border: 1px solid #ccc;
    background: #0000;
    color: #000;
    font-family: sans-serif;
    font-size: 16px;
    line-height: normal;
    box-sizing: border-box;
    border-radius: 0px;
}
#email-yui_3_17_2_1_1555014059115_8408-field {
    padding: 16px 16px;
}
.form-wrapper .field-list .field .caption .field-element {
    font-size: 16px;
}
.form-wrapper .field-list {
    font-size: 1rem;
}

Edit color: #000; to color: #fff;

.form-wrapper .field-list .field .field-element {
    width: 100%;
    padding: 18px !important;
    margin: 8px 0px 4px;
    border: 1px solid #ccc;
    background: #0000;
    color: #000;
    font-family: sans-serif;
    font-size: 16px;
    line-height: normal;
    box-sizing: border-box;
    border-radius: 0px;
}

and add this code

.form-wrapper .field-list .field .field-element:focus {
    color: #000;
}