He estado tratando de personalizar un widget incrustado de Zendesk en mi sitio web. Como no ofrecen ninguna opción para personalizar el aspecto de su formulario, me gustaría hacer cumplir mis reglas CSS.
Agregué este fragmento 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 pueden personalizar/cambiar.
Probé JS para establecer un estilo en línea para formar elementos dentro del <iframe> . Intenté crear una nueva hoja de estilo para anular su hoja de estilo original, pero nada parece funcionar.
Incluso algo tan simple como este código a continuación falla ( #iframe-main-container es un elemento secundario de <iframe> ):
<script> let p = document.querySelector('#iframe-main-container'); p.style.background = 'red'; </script> Si cambio el código anterior y me dirijo a <iframe> , funciona.
Mi primera pregunta sería, ¿es posible anular una regla CSS existente desde un widget incrustado?
Si esto es posible, ¿estoy haciendo algo mal para cambiar su aspecto?
Prueba esto.
<script> let iframe = document.getElementsByTagName("iframe"); let p = iframe[0].contentWindow.document.getElementById('#iframe-main-container'); p.style.background = 'red'; </script>