Editing styles in an iframe embed

Is it possible to edit css styles within an iframe??

I’ve built a site that includes an embedded form with Buildertrend. Buildertrend says that “Your contact form is designed to match your branding or the current style of your website”. (Link to Buildertrend support)

But the form is not styled with the website body font. Here is the test site link.

The embed code includes the below styles. I’d love to know if it’s possible to edit these? I tried creating new styles in Webflow and also embedding new styles with !important, but neither worked.


<style type="text/css">
.field-label, .footnotes {color:#333;}
.button-submit {background:#333;color:#f7f7f7;border-radius:3px!important;text-transform:uppercase!important;}
.button-submit:hover {background:#c4c4c4;color:#787878;cursor:pointer;}
.required-mark {color:#C71212;} /*same as button-submit background*/
.chosen-container, .ui-multiselect.btMultiSelect {width:100% !important;}
.field-value .ui-multiselect.btMultiSelect {max-width:100% !important;}

input[type=text], textarea, select {background:#f7f7f7!important;padding:10px!important;}
.required-mark {float: right; margin-left: 5px!important;}
.footnotes .required-mark {float:none!important;margin:0px!important;}
.field-label label:after, .field-label>span:after {content: " "!important;}
.field-label, .footnotes, .container-fluid label {color:#333;}
.g-recaptcha {
transform:scale(0.77);-webkit-transform:scale(0.77);transform-origin:0 0;-webkit-transform-origin:0 0;}

.confirmation {margin:10px;}

Here is my site Read-Only: [LINK][1]
([how to share your site Read-Only link][2])

[1]: Read-Only Link
[2]: Share a read-only link | Webflow University

You will need to override the bundled CSS. In your style block add:

#btIframe body {
   font: inherit !important;

That should work.