コンタクトフォーム7（CSS3〜チルダ問題）の純粋なCSSレビュー星

Question

コンタクトフォーム7を使用するレビュースタンドのコンタクトフォームを使用したいと思っています。WordPressのコンタクトフォーム7は、私はこのメソッドを使用して、JavaScript、WPプラグイン、またはMODをプラグインファイルに使用しないようにするために、私が取っているルートであるラジオ入力をサポートしています。

無線入力を星印で表示し、スティッキーマナーで動作させるのは、CSS3の選択~のおかげで通常はまっすぐですが、Contact Form 7を使用しているため、各入力とラベルの周りにコンテナが通常の作業~、これは、粘着性の選択を解除します。

私はさらに親を追加しようとしましたが、うまくいけば誰も問題を見つけることができません。

コードをjsFiddle with both working and not working versionsに追加しましたか、ご希望の場合は、以下のコードをご覧ください。ここで

はHTMLです：

<span class="wpcf7-form-control wpcf7-radio"> 
    <span class="wpcf7-list-item first"> 
     <input name="radio-489" type="radio" value="One Star"> 
     <span class="wpcf7-list-item-label">One Star</span> 
    </span> 
    <span class="wpcf7-list-item"> 
     <input name="radio-489" type="radio" value="Two Stars"> 
     <span class="wpcf7-list-item-label">Two Stars</span> 
    </span> 
    <span class="wpcf7-list-item"> 
     <input name="radio-489" type="radio" value="Three Stars"> 
     <span class="wpcf7-list-item-label">Three Stars</span> 
    </span> 
    <span class="wpcf7-list-item"> 
     <input name="radio-489" type="radio" value="Four Stars"> 
     <span class="wpcf7-list-item-label">Four Stars</span> 
    </span> 
    <span class="wpcf7-list-item last"> 
     <input checked="checked" name="radio-489" type="radio" value="Five Stars"> 
     <span class="wpcf7-list-item-label">Five Stars</span> 
    </span> 
</span> 

そして、ここではそれに行くためのCSSです：

.wpcf7-radio { 
    overflow: hidden; 
    display: inline-block; 
    font-size: 0; 
    position: relative; 
} 

.wpcf7-radio input { 
    float: right; 
    width: 16px; 
    height: 16px; 
    padding: 0; 
    margin: 0 0 0 -16px; 
    opacity: 0; 
} 

.wpcf7-radio:hover .wpcf7-list-item-label:hover, 
.wpcf7-radio:hover .wpcf7-list-item-label:hover ~ .wpcf7-list-item .wpcf7-list-item-label, 
.wpcf7-radio input:checked ~ .wpcf7-list-item .wpcf7-list-item-label { 
    background-position: 0 0; 
} 

.wpcf7-list-item-label, 
.wpcf7-radio:hover .wpcf7-list-item-label { 
    position: relative; 
    display: right; 
    float:left; 
    width: 16px; 
    height: 16px; 
    background: url('https://www.bybe.net/files/jsfiddle/stars.png') 0 -16px; 
} 

Answer 1

私はCF7を知っているように、あなたがに応じて、フォームのHTMLを定義することができますあなたのニーズに合わせて、簡単なコードを書くことができます：

<span class="wpcf7-form-control wpcf7-radio"> 
    <input name="radio-489" type="radio" value="One Star" id="onestar"> 
    <input name="radio-489" type="radio" value="Two Star" id="twostar"> 
    <input name="radio-489" type="radio" value="Tre Star" id="trestar"> 
    <span class=stars></span> 
    <label for=onestar>One Star</label> 
    <label for=twostar>Two Star</label> 
    <label for=trestar>Tre Star</label> 

</span> 

これを持つと、CSSのみで星を表示できます。このように：

input[type=radio]:checked + span:after { position: absolute; bottom: 0; left: 0; } 
// here add styles according to input value 
.wpcf7-form-control wpcf7-radio { position: relative; } 

:after疑似要素がすべて同じ場所（下部に配置されます。この方法：HTMLを変更することが許可されていない場合

input[type=radio] { display: none; } 
input[type=radio] ~ .stars { display: block; background:url(star.png) repeat-x; } 
input[type=radio][value=one]:checked ~ .stars { width: 10px; } 
input[type=radio][value=two]:checked ~ .stars { width: 20px; } 

Answer 2

、別の解決策は、（あまりきれい）がありますブロックの左側に表示されます）:checked入力後に