0

I Have tried a few method to adjust the CSS of an iframe after the iframe is loaded but havent been able to succeed, this is what ive come with so far, but to no avail, apologies as my coding is limited, and help would be much appreciated!!

So basically im just trying to adjust some styling in the iframe. The styling is pretty basic, but i have a feeling my code isnt properly implemented.

<script type="text/javascript">
jQuery(function ($) {

$('#fence-calc').load(function() {
  var css = '<style type="text/css">
  
  .bottom-border {
    border-top: 1px solid #113A60;
    background: #113A60;
  };
  
  .step-info .bubble.selected {
    background: #113A60;
};
  
  .input-wrapper .validation-message {
    background: #113A60;
};
  
  .input-wrapper.invalid-input input {
    border-color: #113A60; border-radius: 10px 10px 0px 0px;
};
  
  .view-container .btm-actions .go-home {
    color: #113A60;
};
  
  </style>';
  $('#frame1').contents().find("head").append(css);
});

</script>
Kieran Olsson
  • 9
  • 1
  • To clarify, I am trying to edit styling from within the iframe, not the iframe itself – Kieran Olsson Jun 25 '20 at 00:33
  • 1
    There are so many questions about this. If the iframe content is not from your server, you won't be able to do this. – disinfor Jun 25 '20 at 01:03
  • 1
    Does this answer your question? [Using CSS to affect div style inside iframe](https://stackoverflow.com/questions/583753/using-css-to-affect-div-style-inside-iframe) – disinfor Jun 25 '20 at 01:03
  • What is `$('#fence-calc')`?. It probably has no load event and using `.load()` as event listener is deprecated. As mentioned....you won't be able to do this if the iframe is from a different origin than the main page – charlietfl Jun 25 '20 at 01:49
  • Thanks all for your comments, I think I wont be able to edit as i want as the Iframe is not from my server. – Kieran Olsson Jun 26 '20 at 02:36

0 Answers0