I've been trying to customize an embedded widget from Zendesk on my website. Since they don't give any option to customize the look of its form, I would like to enforce my css rules.
I added this piece of code from Zendesk to have their form on my page.
<script type="text/javascript" src="https://leads-capturer.futuresimple.com/embed.js?token=ca98908sdgfgds9834234jlkjsdb">
This script places a form within an <iframe> and all nodes inside this <iframe> cannot be customized/changed.
I tried JS to set an inline style to form elements inside the <iframe>. Tried create a new stylesheet to override their original stylesheet but nothing seems to work.
Even something as simple as this code below, fails (#iframe-main-container is a child from <iframe>):
<script>
let p = document.querySelector('#iframe-main-container');
p.style.background = 'red';
</script>
If I change the code above and target <iframe>, it works.
My first question would be, is it possible to override an existing CSS rule from an embedded widget?
If this is possible, am I doing something wrong to change its looks?
Give this a try.
<script>
let iframe = document.getElementsByTagName("iframe");
let p = iframe[0].contentWindow.document.getElementById('#iframe-main-container');
p.style.background = 'red';
</script>