联系表 7 的纯 CSS 评论星数（CSS3 ~ 代字号问题）

Question

使用 Contact Form 7 我希望能够有一个带有评论星的联系表，WordPress 的 Contact Form 7 不支持开箱即用的评论星，但它确实支持无线电输入，这是我的路线因为我更喜欢使用此方法来避免必须使用 JavaScript、WP 插件或插件文件的模组。

由于 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] { 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

如果HTML不允许更改，还有一个解决方案（不太漂亮）：

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 伪元素将全部位于同一位置（块的左下角）并且只有一个可见（在 :checked 输入之后）

联系表 7 的纯 CSS 评论星数（CSS3 ~ 代字号问题）

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

html

css

wordpress

contact-form-7