Reputation: 928
so with some googling and SO Q&A searching, I've found out that if you don't have access to the iFrame's stylesheet you can still make edits as long as it lives in the same domain as your webpage that you're embedding it to.
I'm trying to modernize the look of this really old email signup form,
I've wrapped a div around the iframe
and have managed to make some minor adjustments like moving it to the left a bit or something. Nothing really impressive in terms of styling it.
HTML:
<div class="editFrame">
<iframe scrolling="no" marginheight="0" src="http://convio.cancer.ca/site/Survey?ACTION_REQUIRED=URI_ACTION_USER_REQUESTS&SURVEY_ID=34442&s_locale=en_CA" marginwidth="0" width="380" height="220" frameborder="0">
</iframe>
</div>
This is the CSS of the iframe
that I managed to pull from inspecting it with Chrome
CSS:
input:not([type="image" i]), textarea {
box-sizing: border-box;
}
input:not([type]), input[type="email" i], input[type="number" i], input[type="password" i], input[type="tel" i], input[type="url" i], input[type="text" i] {
padding: 1px 0px;
}
input {
-webkit-appearance: textfield;
background-color: white;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
cursor: auto;
padding: 1px;
border-width: 2px;
border-style: inset;
border-color: initial;
border-image: initial;
}
input, textarea, keygen, select, button {
text-rendering: auto;
color: initial;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
margin: 0em 0em 0em 0em;
font: 13.3333px Arial;
}
input, textarea, keygen, select, button, meter, progress {
-webkit-writing-mode: horizontal-tb;
}
This is the CSS i tried to add to style it:
.editFrame iframe input[type="text"] {
padding: 10px !important;
border: solid 1px gainsboro !important;
-webkit-transition: box-shadow 0.3s, border 0.3s !important;
-moz-transition: box-shadow 0.3s, border 0.3s !important;
-o-transition: box-shadow 0.3s, border 0.3s !important;
transition: box-shadow 0.3s, border 0.3s !important;
}
.editFrame iframe input[type="text"]:focus, .editFrame input[type="text"].focus {
border: solid 1px #707070 !important;
-webkit-box-shadow: 0 0 5px 1px #969696 !important;
-moz-box-shadow: 0 0 5px 1px #969696 !important;
box-shadow: 0 0 5px 1px #969696 !important;
}
my intention is to get it to look like the "Glow" input field foundo n this page: Various CSS Input Text Styles, Tutorial, and also edit the labels Name, Email, etc to look nicer and change the font.
However none of those seem to be working.
All that I've managed to do that seems to have worked is this (commented out in my stylesheet because I thought it might be conflicting):
.editFrame {
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
height: 0;
overflow: hidden;
}
.editFrame iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
Anyone know if what I'm doing is possible?
Thanks in advance for your help!
Upvotes: 0
Views: 965
Reputation: 131
You can use jQuery to add style for the iframe:
$('.editFrame iframe').ready( function() {
$('.editFrame iframe').contents().find("head").append($("<style type='text/css'>position: absolute; top:0; left: 0; width: 100%; height: 100%; </style>"));
});
Upvotes: 1