我正在使用CF7(联系表格7)来生成网站的表格。我正在使用单选按钮来选择服务类型。这是CF7代码。
<div class="radio-group">
[radio cleaning-type class:cleaning-type default:1 "Standard" "Deep" "Move
In/Out"]</div>
以下是代码的简化HTML
<div class="radio-group">
<div class="form-group wpcf7-form-control wpcf7-radio cleaning-type">
<div class="radio">
<label>
<input name="cleaning-type" type="radio" value="Standard" checked="" aria-invalid="false" aria-required="true" required="">Standard
</label>
</div>
<div class="radio">
<label>
<input name="cleaning-type" type="radio" value="Deep" aria-invalid="false" aria-required="true" required="">Deep
</label>
</div>
<div class="radio">
<label>
<input name="cleaning-type" type="radio" value="Move In/Out" aria-invalid="false" aria-required="true" required="">Move In/Out
</label>
</div>
</div>
</div>
与上述代码相关的CSS在下面
input[type=radio] {
position: absolute;
visibility: hidden;
display: none;
}
label {
color: #3f4b5e;
cursor: pointer;
font-weight: bold;
padding: 5px 20px;
}
.radio-group {
/*border: solid 3px #332f35;*/
display: inline-block;
margin: 20px;
border-radius: 10px;
overflow: hidden;
}
.radio {
display: inline-block;
border: solid 3px #332f35;
margin : 20px;
border-radius : 10px;
padding : 20px;
color: #3f4b5e;
}
.radio label input[type=radio]:checked{
color : #10b1e7;
background-color: gold;
}
我希望所选的单选按钮可以更改颜色。但是,未检测到。