自分のウェブページと同じドメインにあるiFrameをCSSで編集しようとしていますか？

Question

だから、いくつかのグーグルとSO Q &検索して、iFrameのスタイルシートにアクセスできない場合は、あなたのウェブページと同じドメインに住んでいる限り、それを埋め込む。

私は iframe周りのdivを包みましたし、ビットを左またはに移動するようにいくつかのマイナーな調整を行うために管理している

私はこれは本当に古いメール登録フォームの外観を近代化しようとしています、何か。それをスタイリングという面では本当に印象的なものは何もありません。

HTML：これは私がChromeでそれを検査から引くことに成功しiframeのCSSが

<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> 

ある

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

このページで見つかった "グロー"入力フィールドのように見えるようにして、名前、電子メールなどのラベルを編集してフォントを変更してください。

しかし、それらのどれも動作していないようです。私がやっている何であるか

.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

あなたはIFRAMEのスタイルを追加するためにjQueryを使用することができます：私はあなたのコードを使用してみました、そして何が起こるかを見るために私の外部スタイルシートからの私のCSSを削除しますが、しまし

$('.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>")); 
});