SorryEh
SorryEh

Reputation: 928

Trying to css edit iFrame that lives in same domain as my webpage?

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&amp;SURVEY_ID=34442&amp;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

Answers (1)

OhDeer
OhDeer

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

Related Questions