I am using Clutch widget in my website page https://staging-outpaceseo.kinsta.cloud/services/law-firm-seo/ for some credibility. And the iframe has its pre-defined CSS that I need to override. I tried add the style tag inside the iframe using jQuery, but it is not working.

Webpage: https://staging-outpaceseo.kinsta.cloud/services/law-firm-seo/ Script:

<script>
            $(document).ready(function() {
                const id = $('.clutch-widget iframe').attr('id');
                var iframe = document.getElementById(id);
                var style = document.createElement('style');
                style.textContent =
                    '.carousel_widget__wrapper, .carousel_widget {' +
                    '  background: #ffffff;' +
                    '}' 
                ;
                console.log(id, 'id')
                console.log(iframe, 'iframe')
                console.log(style, 'style')
                console.log(iframe.contentDocument, 'iframe.contentDocument')
//              let head = iframe.contents().find('head');
//              head.append(style);
                iframe.contentDocument.head.appendChild(style)
            });
        </script>

You can check the page console to check the output of above console logs. Instead of adding the style tag to the clutch iframe, i think new iframe is being created and the style tag is added there.