Best Way to style Contact Form 7 Checkbox And Radio Field

Best Way to style Contact Form 7 Checkbox And Radio Field

On this page, we’ll take a look on how to style contact form 7 styling of Checkbox Field and Radio Button Field

Let Get Started .

Styling Checkbox With Checkbox Element First

[checkbox checkbox-193 use_label_element "Option 1" "Option 2" "Option 3" "Option 4"]
[radio radio-67 use_label_element default:1 "Radio 1" "Radio 2" "Radio 3" "Radio 4"]
.wpcf7-checkbox .wpcf7-list-item-label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    border: 1px solid #ddd;
    border-radius: 100%;
    background: #fff;
    margin: auto;
    bottom: 0;
}
.wpcf7-checkbox input[type="checkbox"] {
    display: none;
}
.wpcf7-checkbox .wpcf7-list-item-label {
    padding-left: 30px;
    line-height: 30px;
    display: block;
    position: relative;
}

.wpcf7-checkbox .wpcf7-list-item-label::after {
    content: '';
    width: 12px;
    height: 12px;
    background: #015DC7;
    position: absolute;
    border-radius: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    margin: auto;
    top: 3px;
    bottom: 3px;
    margin: auto;
    left: 3px;
    opacity: 0;
}
.wpcf7-checkbox input[type="checkbox"]:checked + .wpcf7-list-item-label::after {
    opacity: 1;
}

Output of  Checkbox

Styling of Radio Button

[checkbox checkbox-193 use_label_element "Option 1" "Option 2" "Option 3" "Option 4"]
[radio radio-67 use_label_element default:1 "Radio 1" "Radio 2" "Radio 3" "Radio 4"]
.wpcf7-radio input[type="radio"]{display:none}
.wpcf7-radio .wpcf7-list-item-label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    border: 1px solid #ddd;
    border-radius: 100%;
    background: #fff;
    margin: auto;
    bottom: 0;
}
.wpcf7-radio input[type="radio"] {
    display: none;
}
.wpcf7-radio .wpcf7-list-item-label {
    padding-left: 30px;
    line-height: 30px;
    display: block;
    position: relative;
}

.wpcf7-radio .wpcf7-list-item-label::after {
    content: '';
    width: 12px;
    height: 12px;
    background: #015DC7;
    position: absolute;
    border-radius: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    margin: auto;
    top: 3px;
    bottom: 3px;
    margin: auto;
    left: 3px;
    opacity: 0;
}
.wpcf7-radio input[type="radio"]:checked + .wpcf7-list-item-label::after {
    opacity: 1;
}

Output of Radio

Leave A Reply