[英]Pure CSS Review Stars for Contact Form 7 (CSS3 ~ tilde Issue)
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. 使用联系表格7我希望能够与评论明星联系表格,WordPress的联系表格7不支持开箱即用的评论星,但它确实支持无线电输入,这是我正在采取的路线,因为我更喜欢使用此方法可避免对插件文件使用JavaScript,WP插件或mod。
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. 由于CSS3选择
~
使得无线电输入显示为星星,并且使它们表现为粘性,通常是直截了当的,但是因为我使用的是Contact Form 7,它在每个输入和标签周围引入了一个容器,导致破坏了通常的工作~
,这打破了粘性选择。
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. 我已经将代码添加到jsFiddle中,包括工作版本和不工作版本 ,或者如果您愿意,可以查看下面的代码。
Here is the HTML: 这是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: 这是与它一起使用的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;
}
As I know CF7 , you can define the form HTML according to your needs, so you're able to write simplier code: 据我所知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>
Having this will allow to show stars with css only. 拥有这个将允许仅显示带有css的星星。 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; }
If HTML is not allowed to change, there is another solution ( less pretty ): 如果不允许更改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; }
this way the :after
pseudo-elements will be all located on same place ( bottom left of the block ) and only one will be visible ( after :checked
input ) 这样
:after
伪元素将全部位于同一个地方(块的左下角),只有一个可见(在:checked
输入之后)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.