How to customize the highlight effect backgound and text color?

Text on my form is white, and readable, until someone clicks into the form to select an option, or until there is a required field missing input, then the text changes colors, and you can not read it. How do you fix?

I have checked your form and I can see the text is visible even when the highlight effect or the error color are there:

However, in case that you want to disable this effect then you can inject this CSS code: 

.form-line-error, .form-line-active{

    background: none !important;

}

In case that you want to change the color when the field is active then this CSS code will help you: 

.form-line-active{

    background: Your color here;

}

The same with the error highlight effect: 

.form-line-error{

    background: Your color here;

}

In case that you want to change the text color of the elements when they are with the highlight effect then you should add the color property to the code and it should work: 

Both at the same time.

.form-line-error, .form-line-active{

  color: Your color here;

}

Separately: 

.form-line-active{

    color: Your color here;

}

.form-line-error{

    color: Your color here;

}

This guide will help you to inject the code to your form: How-to-Inject-Custom-CSS-Codes

Hope this helps.