Pure CSS Review Stars for Contact Form 7 (CSS3 ~ tilde Issue)

Question

Using Contact Form 7 I want to be able to have a contact form with review stars, Contact Form 7 for WordPress does not support review stars out of the box but it does support Radio Inputs which is the route I'm taking as I prefer to use this method to avoid having to use JavaScript, WP Plugins or mods to the plugin files.

Getting radio inputs to appear as stars and have them behave in a sticky maner is normally straight forward thanks to CSS3 selection ~, however because I am using Contact Form 7 it introduces a container around each input and label resulting in breaking the usual working ~, this breaks the sticky selection.

I have tried adding the parent in addition but no luck, hopefully someone fresh can spot the problem.

I've have added the code to a jsFiddle with both working and not working versions, or if you prefer you can take a look at the code below.

Here is the 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>

And here is the CSS to go with it:

.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

As I know CF7 , you can define the form HTML according to your needs, so you're able to write simplier code:

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

Having this will allow to show stars with css only. Like this:

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