How to apply CSS to iframe?

Styling within the iframe content

JavaScript injection magic: Iframes that share same-domain with the parent page can be spiced up with JavaScript. Stylesheets or style declarations can be injected directly into your iframe faster than gym-goers rip their shirts off:

const frame = document.getElementById('myIframe');
const style = frame.contentWindow.document.createElement('style');
style.innerHTML = `
  body { font-family: 'Arial', sans-serif; }
  h1 { color: green; }
`;
frame.contentWindow.document.head.appendChild(style); // Bolted on tighter than the lid on grandma's secret recipe jar


Best-kept secret, the "srcdoc" attribute: For inline iframes where control meets power, the srcdoc attribute lets you smuggle HTML and styles inside:

<iframe id="myIframe" srcdoc="<style>body { font-weight: bold; }</style><p>Your Content</p>"></iframe>


CSS Link in iframe? Yes, please!: Control over the HTML source of the iframe gives you the luxury to include a CSS link directly in its content. Your convenience, our pleasure:

<iframe src="iframe.html"></iframe>
<!-- Inside iframe.html -->
<link rel="stylesheet" href="style.css" type="text/css">


How to style cross-domain iframes

Cross-domain iframes require the finesse of server-side solutions or the thoughtful application of CORS headers.

The PHP style charm: Server-side sorcery with PHP allows you to dynamically stage the CSS:

<?php
$content = file_get_contents('http://external-site.com/iframe-content.html');
$styledContent = str_replace('</head>', '<link rel="stylesheet" href="style.css" /></head>', $content);
echo $styledContent; // Beautiful isn't it, CSS with a side of dynamic PHP
?>


When dealing with cross-origin remember to apply CORS:

header('Access-Control-Allow-Origin: *'); // Passport to cross-origin


Responsive and cross-browser compatible iframes

Ensure your iframe elements are responsive. Using percentages or viewport units for width and height dimensions is a crowd-pleaser:

iframe {
  width: 100%; // Fill 'er up!
  max-width: 600px; // Savvy? Never exceeds its container's size!
  height: 500px; // Be my guest, adjust as required!
}


Cross-browser compatibility is mandatory. With different browsers behaving like picky eaters when served iframe styling, ensure your designs taste good on Chrome, Firefox, and Safari.

Styling iframes: The jQuery way

jQuery enthusiasts, rejoice! Keep it simple, keep it jQuery:

$('#myIframe').contents().find('head').append(
  $('<link rel="stylesheet" type="text/css" href="style.css">') // Like tossing a hat into a crowd, but more stylish!
);


Ensure you're dealing with the same domain. Remember, jQuery isn't a diplomatic passport to bypass cross-domain policies!