How do I customize the background color on the Driving Distance widget?

Because my forms use a black background and the font color used by the driving distance widget is also black, the text is not visible on my website.

Could you please help me with a work around?

You can do that by going to your Driving Distance widget wizard:

And then to Custom CSS:

You can paste this code there:

#ddForm {

background-color: red;

}

To change the background of the widget.

I put red, but feel free to change to any color that suits you.

Please let me know if you have further questions.

Thank you!

Thank you! Your solution works to change the background of the entry field, but it does not change the background of the field that populates to display the calculation. 

Here's what it looks like when the user provides the departure city/destination for calculation:

Here's what it looks like when the user clicks the Calculate button:

In order to change the background of the results as well, you should use #ddResult selector in your CSS. Your custom CSS would end up looking like this:

#ddForm, #ddResult {
background-color: grey;
}

This will force the results/calculation to look the same as the initial page of the Driving Distance widget. If you want to have different color background for each of these two pages, then you can use custom CSS such as this:

#ddForm {
background-color: grey;
}
#ddResult {
background-color: lightgray;
}

Please let us know if you need any further assistance.