Override body style for content in an iframe
An iframe is a 'hole' in your page that displays another web page inside of it. The contents of the iframe is not in any shape or form part of your parent page.
As others have stated, your options are:
- give the file that is being loaded in the iframe the necessary CSS
- if the file in the iframe is from the same domain as your parent, then you can access the DOM of the document in the iframe from the parent.
edit css of elements within iframe
[...] Obviously when the webpage renders that iframe it is calling an html doc hosted somewhere. I need to know if there is a way to alter that css.
The question of how to style an element inside an iFrame has come up on StackOverflow many times before - try having a look here:
How to apply CSS to iframe?
Another post that addresses it can be seen here:
Using CSS to affect div style inside iframe
And one with a rather short explanation here:
CSS override body style for content in iframe?
Can't apply css to an iframe (the tag itself)
If your CSS is coming from a CSS module it won't apply styles to nested components. (Which is an important feature of CSS modules).
Try adding /deep/
in front of your CSS for your iframe (although /deep/
is deprecated, you're supposed to use ::ng-deep
instead now)
/deep/ .ql-video {
height: 500px !important;
width: 300px !important;
}
(Also, you're not reeaallly supposed to use /deep/
, you should make CSS for that specific component and apply it there.)
Here's some information on Angular's component styles and 'deep': https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep
Add CSS to iframe elements using the page .css file
Styles from the parent will not be applied to the document within the iframe. The best solution is to add the stylesheet to the document in the iframe. Either via javascript or creating a template page to load in via src.
Something like:
var head = doc.head
var link = doc.createElement('link')
link.type = 'text/css'
link.rel = 'stylesheet'
link.href = ...src...
head.appendChild(link)
in your existing javascript.
I've put together a small example with a style block here
How to apply css to iframe content?
You can use jQuery's .content()
function to access it.
$('yourIframe').contents().find('#yourItemYouWantToChange').css({
opacity: 0,
color: 'purple'
});
Example
Here's an example showing me applying css to the jQuery logo typically found in the top left of the screen. Mind you, it has to be same domain/ports etc, so that's why my example features jsfiddle in the iframe.
http://jsfiddle.net/pPqGe/
Related Topics
How to Use a CSS Wildcard in the Middle of an Attribute Selector
Are Flex Items Block Level Element
Margin-Top Not Working with Clear: Both
Why "Overflow: Hidden" Clears a Float
CSS for Star Ratings via Fontawesome
How to Prevent a CSS Keyframe Animation from Running on Page Load
How to Stop Jquery Mobile to Apply Styles to My Specific Form Elements
Input Type="Image" Shows Unwanted Border in Chrome and Broken Link in IE7
iOS Forces Rounded Corners and Glare on Inputs
Bootstrap Modal Sitting Behind Backdrop
Bootstrap Change Order of Columns
I Want to Vertical-Align Text in Select Box
How to Align Nav Items to the Right in Bootstrap 5
IE7 and the CSS Table-Cell Property
Apply Different CSS Stylesheet for Different Parts of the Same Web Page
CSS Select the First Child from Elements with Particular Attribute