Looking to personalize the appearance of an iframe using CSS styling?

I am working with an iframe that generates a form, and I would like to customize the CSS of this form. How can I go about editing the CSS?

<div class="quiz-container" style="text-align: center;" data-quiz="#######" data-preview="true" data-offset="0" data-autoscroll="yes"></div>

<script src="https://marketingfx.leadshook.io/s/js_embed"></script>

<div class="quiz-container" style="text-align: center;" data-quiz="#######" data-preview="true" data-offset="0" data-autoscroll="yes"></div>
<script src="https://marketingfx.leadshook.io/s/js_embed"></script>

javascripthtmljquerycssiframe

Answer №1

The JavaScript code generates an iframe that directs to a different domain.

If you had authority over that domain, you could modify the page loaded with different CSS styles. Another option would be to implement an API (using postMessage) so that JavaScript on your website could request CSS modifications on the framed page.

Unfortunately, it seems that you do not have control over https://marketingfx.leadshook.io, hence this cannot be achieved.

The webpage belongs to someone else, meaning you are unable to dictate its appearance.

This functionality might be provided by https://marketingfx.leadshook.io. They may offer a solution for this. Refer to their documentation or get in touch with your contacts there.

Answer №2

This query has already been addressed on Stack Overflow before. Kindly refer to Override body style for content in an iframe

You will find multiple solutions in that thread that may be beneficial.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Hide the popup menu when the user clicks outside of it

I am presenting the following code <!DOCTYPE html> <html> <head> <title>GalacticCraft</title> <link rel="stylesheet" type="text/css" href="style.css" /> <link rel="shortcut icon" type="image/png" href="fa ...

javascripthtmlcss

Most efficient method to initiate an Ajax request using jQuery

I am attempting to use AJAX to load a page like this, but I am new to jQuery and Ajax. Please point out any mistakes I may be making here, as I consistently receive an error page. <html> <head> <script src="http://code.jquery.com/jquer ...

jqueryajax

Implement the Show/Hide TinyMCE Functionality in your <textarea></textarea> Box

Information I recently added TinyMCE to my website after discovering that a website I frequently visit uses it. While their design and functionality are different, I managed to replicate their look on my own site and now want to implement a specific featu ...

javascriptjquery

What is the best way to save the city name received from geolocation into a variable and then make an AJAX request?

<script> new Vue({ el: '#fad' , data: { data: {}, }, mounted() { var self = this; navigator.geolocation.getCurrentPosition(success, error); function success(position) { var GEOCO ...

javascriptjqueryajaxgoogle-mapsvue.js

Using the $.each loop to iterate through JSON data within the <optgroup>

I am currently working on extracting information from a JSON file and displaying the subsectors within <optgroup label=""> tags in a non-selectable format. The JSON file I am working with looks like this: { "sectors": [ { "title": "Busi ...

javascriptjqueryjsonloopsoptgroup

After refreshing the page, RouterLinkActive in Angular 6 fails to work

Scenario In my application, there is a menu with various items. The selected item is distinguished by adding the selected class to it, which changes its appearance. Problem While navigating between routes works smoothly, the issue arises when the page ...

htmlangulartypescriptangular6

Is there a way to confirm if all div elements have a designated background color?

I have a scenario where I have dynamically added several divs with a specific class to my webpage. These divs change color when the user hovers over them. I am trying to trigger a specific function once the last div has been set to a particular backgroun ...

javascriptjqueryhtmlcss

Error in browser caused by JQuery JavaScript, not Dreamweaver

I need help creating a webpage that can extract and display recent earthquake data based on user input location on Google Maps. I have been using Dreamweaver to test my code, and everything functions perfectly when I use the live webpage feature within th ...

javascriptjqueryhtmlajaxjson

Enhancing the appearance of buttons with hover effects in Twitter Bootstrap

I am interested in customizing the hover button styling for Bootstrap v3.2. The default behavior is to darken on hover, but I would like to make it lighter instead. Although I checked the Buttons Less variables, I couldn't find an option specifically ...

csstwitter-bootstraptwitter-bootstrap-3sass

Togglebox CSS is set to hide elements initially

I am having issues with Lightbox2 as it is not functioning properly when I try to click on the image. Upon inspecting the Developer Console in Chrome, I noticed that the overlay and image are being added to the DOM, but the display property is set to none ...

jqueryhtmlcsslightbox2

Manipulating strings in Discord.js

if(msg.content.includes("[mid]")) { let str = msg.content let pokeID = str.substring( str.indexOf("[mid]") + 5, str.lastIndexOf("[/mid") //get the unique-code for a pokemon ); msg.channel.send ...

javascriptnode.jsdiscord.js

Is it achievable to have a background image cover size with a responsive rollover effect?

I’m currently facing a unique challenge where I want to have an image as the background of my website, with the size set to cover the entire screen. On this background image, there are elements like buildings that I want to interact with when hovered ove ...

javascriptjqueryhtmlcss

Asynchronous Return in NodeJS Class Methods

Currently, I am in the process of developing a JavaScript class that includes a login method. Here is an overview of my code: const EventEmitter = require('events'); const util = require('util'); const Settings = require('./config ...

javascriptnode.js

Tips for increasing the size of the SVG icon within Material UI iconButtons

Have you experimented with creating webpages using react.js along with the Material UI library? How can I adjust the size of an SVG icon? Recently, I developed a "create new" component, which consists of a material paper element with an add button on top. ...

csssvgreactjsmaterial-designmaterial-ui

Design featuring a fixed top row and a scrollable bottom row

I need to divide a div container into two vertical sections, one occupying 60% of the space and the other 40%. The top div (60%) should always be visible, while the bottom div (40%) should be scrollable if it exceeds its limit. I have tried different app ...

htmlcssjquery-mobile

Having trouble getting my asynchronous promise to work properly

I am currently working on implementing a login server function and I am struggling to understand why the promise I'm making is not being called. My setup involves using MongoDB with Mongoose as the backend, which is connected to using User.findOne. A ...

javascriptexpresspromiseasync-await

The res.download() function is not functioning properly when called from within a function, yet it works perfectly when directly called through the API in a browser

I have a button that, when clicked, triggers the downloadFile function which contacts the backend to download a file. async downloadFile(name) { await this.$axios.$get(process.env.API_LINK + '/api/files/' + name) }, app.get('/api/files/ ...

javascriptexpressaxios

Having trouble with the flexbox flex-direction: column property not functioning properly with the textarea element in Firefox?

Inconsistencies between Chrome and Firefox have been noticed in the following example. While the footer height is set to height:40px and appears fine in Chrome, it seems smaller in Firefox, around 35px. Any specific reasons for this difference? Link to t ...

htmlcssflexbox

Navigating through different tabs in an AngularJS application is made simple and efficient with the help of $

I used the angular-authentication-example to create a login page for my project. After logging in, the homepage should display multiple tabs just like in this example on Plunker. <ul class="nav nav-tabs" ng-controller="TabsCtrl"> <li ng-class= ...

javascriptangularjsangular-ui-router

Error in Angular timer causing NaN result

Struggling to create a timer in JavaScript, a basic one at that. I wrote what I thought was correct code, but it's not functioning properly - resulting in the textbox value changing to NaN after just one second. Below is the code snippet: <timer ...

javascripthtmlangularjsionic-framework