Customising Newsletter Block - Active State

Hi team,
I am using the following code to customise my newsletter block:
 

.sqs-block-newsletter .newsletter-form-field-element {
    border: none !important; 
border-bottom: 1px solid #fff !important;
border-radius: 0px !important;
background: transparent; 
}

However as the Background is black I would like to make the active state when the field is clicked on different. 

Currently this becomes white like shown here with black text. This means the text disappears against the background when you click out of the form. How can I change the white background colour and the text colour when the field is active?   Thanks!

Can you share site url? We can check easier.

12 hours ago, tuanphan said:

Can you share site url? We can check easier.

Thanks @tuanphan !
My site is: https://mushroom-rabbit-ff8k.squarespace.com PW:merton2020

The newsletter block is down the bottom in the footer. Thanks again for your help! 

Hi @tuanphan any chance I can give you a friendly nudge on this? Any help is hugely appreciated - I'm yet to be able to solve it. Thanks again! 

Hi. See fine here. Do you still need help on this?

18 hours ago, tuanphan said:

Hi. See fine here. Do you still need help on this?

Thanks all sorted! 
For anyone who encounters the same issue I used: 

.newsletter-form input {
  color: #fff !important;
  background: #000 !important; 
}