Reply To: Changing background color using my own CSS

[ColibriSan]

Thanks for your fast reply, here is what i did, little different from your suggestion.

This is my need:
on my website i have a dark/white theme switcher that transform the background of my website from black to white and viceversa. The color changing is applied with a transition time of 1 second, so i don’t need gradients but a way to change the background color of my website in 1 second transition.

Since the DIV that contains the chart is already changing the color when pressing the switch button, i’ve set the backgroundColor property to “transparent”, in this way the chart takes the color of it’s parent element (the DIV) without adding any line of code to the CSS. And in this way the behaviour is EXACTLY as expected.

There’s now a problem i did not expected:
i’ve set the “enabed = false” for the inputFields of the Range selector, and setting the chart backgroundColor = “transparent”, 2 rectangles appears right behind the Range Selector element i have on the chart. 2 rectangles with white background and black border line, as you can see in the attached image.

The chrome inspector shows this for those due rectangles:

<input class=”canvasjs-input-field” type=”text” style=”-webkit-tap-highlight-color: transparent;”>

but as you can see from the image attached the background of the rectangles is white even if the overall background is black.

How can i get rid of that rectangles? i’d like to keep everything as it’s now since is working perfeclty, just want to remove those unwanted objects.

Black version:
https://imgur.com/tReqkNJ

White version
https://imgur.com/dlY7nNq