Question

所以通过一些谷歌搜索和SO Q＆amp; A搜索，我发现如果您无法访问iFrame的样式表，只要它与您的网页位于同一个域中，您仍然可以进行编辑将其嵌入到。

我正在努力使这个真正旧的电子邮件注册表单的外观现代化，

我在iframe附近包裹了一个div，并设法做了一些小的调整，比如将它向左移动一点点。在造型上没有什么真正令人印象深刻。

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>

这是iframe的CSS，我设法通过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;
}

这是我试图添加的CSS样式：

.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;
}

我的目的是让它看起来像此页面上的“Glow”输入字段：Various CSS Input Text Styles，Tutorial，还可以编辑标签名称，电子邮件等，以便更好看并更改字体。

然而，这些似乎都没有起作用。

我设法做的所有事情似乎都有效（在我的样式表中注释掉了因为我觉得它可能有冲突）：

 .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%;

}

任何人都知道我在做什么是可能的吗？

提前感谢您的帮助！

Answer 1

您可以使用jQuery为iframe添加样式：

<style>
    .sidebar-nav_wrapper
    {
       float: left;
       margin-left: 5px;
       width: 250px;
       position: relative;
       height: 650px;
    }
</style>

<div id="sidebar-wrapper">
  <h4 class="sidebar-brand">Select Field Type</h4>
        <div class="sidebar-nav_wrapper">

          <ul class="sidebar-nav">

             <li><a href="#" data-toggle="modal" data-target="#SingleLine_Modal">Single Line</a></li>
             <li><a href="#" data-toggle="modal" data-target="#PickList_Modal">Pick List</a></li>
             <li><a href="#" data-toggle="modal" data-target="#MultiSelect_Modal">Multi Select</a></li>
             <li><a href="#" data-toggle="modal" data-target="#MultiLine_Modal">Multi Line</a></li>
             <li><a href="#" data-toggle="modal" data-target="#Email_Modal">Email</a></li>
             <li><a href="#" data-toggle="modal" data-target="#Phone_Modal">Phone Number</a></li>
             <li><a href="#" data-toggle="modal" data-target="#Mobile_Modal">Mobile Number</a></li>
        </ul>
        </div>
        <div class="sidebar-nav_wrapper">
          <ul class="sidebar-nav">
             <li><a href="#" data-toggle="modal" data-target="#Date_Modal">Date</a></li>
             <li><a href="#" data-toggle="modal" data-target="#Time_Modal">Time</a></li>
             <li><a href="#" data-toggle="modal" data-target="#DateTime_Modal">Date-Time</a></li>
             <li><a href="#" data-toggle="modal" data-target="#CheckBox_Modal">Checkbox</a></li>
             <li><a href="#" data-toggle="modal" data-target="#Radio_Modal">Radio</a></li>
             <li><a href="#" data-toggle="modal" data-target="#Decimal_Modal">Decimal</a></li>
             <li><a href="#" data-toggle="modal" data-target="#Number_Modal">Number</a></li>
             <li><a href="#" data-toggle="modal" data-target="#AutoNumber_Modal">Auto Number</a></li>
 </ul>
        </div>
   </div>

试图css编辑与我的网页位于同一域的iFrame？

1 个答案: