He estado tratando de personalizar incorporado un widget de Zendesk en mi sitio web. Ya que no dan ninguna opción para personalizar el aspecto de su forma, me gustaría hacer valer mis reglas css.
He añadido este pedazo de código de Zendesk para tener su formulario en mi página.
<script type="text/javascript" src="https://leads-capturer.futuresimple.com/embed.js?token=ca98908sdgfgds9834234jlkjsdb">
Este script coloca un formulario dentro de un <iframe> y todos los nodos dentro de este <iframe> no se puede personalizar/cambiar.
Traté de JS para establecer una línea de estilo a los elementos de formulario dentro de la <iframe>. Trató de crear una nueva hoja de estilo para anular su original de la hoja de estilos, pero nada parece funcionar.
Incluso algo tan simple como este código siguiente, se produce un error (#iframe-main-container es un niño de <iframe>):
<script>
let p = document.querySelector('#iframe-main-container');
p.style.background = 'red';
</script>
Si puedo cambiar el código de arriba y de destino <iframe>funciona.
Mi primera pregunta sería, ¿es posible anular existente regla CSS a partir de un embedded widget?
Si esto es posible, estoy haciendo algo mal para cambiar su apariencia?