After doing some research and browsing through Stack Overflow questions, I've discovered that even if you don't have access to the iFrame's stylesheet, you can still make edits as long as it resides in the same domain as your webpage where you're embedding it.
I am currently working on revamping an old email signup form,
As of now, I have enclosed the iframe within a div and made some minor adjustments like shifting it slightly to the left. Nothing groundbreaking in terms of styling has been done.
Here is the HTML snippet:
<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 for the iframe extracted from Chrome inspection:
CSS:
input:not([type="image" i]), textarea {
box-sizing: border-box;
}
(remaining CSS styling content here)
This is my attempt at adding custom styling:
.editFrame iframe input[type="text"] {
(styling properties here)
}
(editFrame iframe input[type="text"]:focus, .editFrame input[type="text"].focus) {
(styled focus properties here)
}
My goal is to achieve a similar look to the "Glow" input field demonstrated on this page: Various CSS Input Text Styles, Tutorial, and also enhance the appearance of labels such as Name, Email, etc by adjusting the font.
Despite my efforts, none of these changes seem to be taking effect.
The only modification that seems to work are the following (currently commented out in my stylesheet due to potential conflicts):
.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%;
}
Any insights or suggestions if what I'm attempting is feasible?
Thank you in advance for your assistance!