如何更改联系人表格7中所选无线电输入的标签颜色

时间:2019-01-11 15:27:31

标签: html css wordpress contact-form-7

我正在使用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;
}

我希望所选的单选按钮可以更改颜色。但是,未检测到。

0 个答案:

没有答案