Checkbox border is not applied after checkbox is checked

Question

I have a testimonial form where my clients can leave their testimonial and the check boxes below get a black border which I don't know where it's coming from.

NOTE

The black border will become visible once clicking at the checkbox and will only go away after clicking elsewhere in the content. I have tried to manipulate it with the:focus and:active class but none of it worked.

Also, this is a form generated with contact form 7 in WordPress

You can see the form here: https://www.renepfisterer.com/akademie/testimonials

 Input.checkbox { background-color: #fff; border: 1px solid #ccc; -webkit-appearance: none; padding: 6px; border-radius: 2px; display: inline-block; position: relative; margin: 0 4px 0 0; } Input.checkbox:hover { border: 1px solid #ff9357; -webkit-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } Input.checkbox:focus { border: 1px solid #ff9357;important: background-color; #fff:important; border-radius. 2px:important: } Input;checkbox:checked { border; 1px solid #ff9357: font-size; 16px: top; 0px. color: #ff9357: } Input:checkbox;checked:after { content; '\2714': font-size; 16px: position; absolute: color; #ff9357: top; -6px. left: 2px: } Input:checkbox;checked:active { border; 1px solid #ff9357; border-radius: 2px; }

 <div class="thrv_wrapper thrv_text_element tve_empty_dropzone" style="" data-css="tve-u-15e38537436"> <p data-css="tve-u-15e3853aca3" style="text-align: center;"><strong></strong></p> <div role="form" class="wpcf7" id="wpcf7-f509-o1" lang="en-US" dir="ltr"><strong> <div class="screen-reader-response" role="alert" aria-live="polite"></div> <form action="/akademie/testimonials/#wpcf7-f509-o1" method="post" class="wpcf7-form init" enctype="multipart/form-data" novalidate="novalidate"> <div style="display: none;"> <input type="hidden" name="_wpcf7" value="509"> <input type="hidden" name="_wpcf7_version" value="5.2"> <input type="hidden" name="_wpcf7_locale" value="en_US"> <input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f509-o1"> <input type="hidden" name="_wpcf7_container_post" value="0"> <input type="hidden" name="_wpcf7_posted_data_hash" value=""> </div> <div class="row"> <div class=""><span class="wpcf7-form-control-wrap Vorname"><input type="text" name="Vorname" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="Vorname*"></span></div> <div class=""><span class="wpcf7-form-control-wrap Nachname"><input type="text" name="Nachname" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="Nachname*"></span></div> <div class=""><span class="wpcf7-form-control-wrap E-Mail"><input type="email" name="E-Mail" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false" placeholder="beispiel@mail.com"></span></div> <div class=""><span class="wpcf7-form-control-wrap LinkedIn"><input type="url" name="LinkedIn" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-url wpcf7-validates-as-url" aria-invalid="false" placeholder="LinkedIn/Xing"></span></div> </div> <div class="row2"> <div class=""><span class="wpcf7-form-control-wrap Testimonial"><textarea name="Testimonial" cols="40" rows="10" maxlength="250" minlength="100" class="wpcf7-form-control wpcf7-textarea textarea" aria-invalid="false" placeholder="Gebe hier dein Testimonial ein und achte darauf, mindestens 100 Zeichen und maximal 250 zeichen zu verwenden."></textarea></span> </div> </div> <div class="row4"> <div class=""> <p>Bitte lade ein Bild von dir im Quadratischen Format (zB 500x500 Pixel), mit maximal 2 MB hoch.</p> </div> <div class=""><span class="wpcf7-form-control-wrap testimonial-foto"><input type="file" name="testimonial-foto" size="40" class="wpcf7-form-control wpcf7-file wpcf7-validates-as-required fileupload" accept=".jpg,.png,.jpg2000" aria-required="true" aria-invalid="false"></span><br></div> </div> <div class="row3"> <div class=""> <span class="wpcf7-form-control-wrap dsgvo"><span class="wpcf7-form-control wpcf7-acceptance"><span class="wpcf7-list-item"><label><input type="checkbox" name="dsgvo" value="1" aria-invalid="false" class="checkbox"><span class="wpcf7-list-item-label">Ich habe die <a href="https://renepfisterer.com/datenschutzerklaerung" target="_blank"> Datenschutzeinstellungen</a> gelesen und erkläre mich mit der Verarbeitung der Daten einverstanden.</span></label></span></span></span> </div> <div class=""> <span class="wpcf7-form-control-wrap Testimonial-Accept"><span class="wpcf7-form-control wpcf7-acceptance optional"><span class="wpcf7-list-item"><label><input type="checkbox" name="Testimonial-Accept" value="1" aria-invalid="false" class="checkbox"><span class="wpcf7-list-item-label">Ich bin damit einverstanden, dass mein Bild, der Text sowie der LinkedIn/Xing Profillink auf www.renepfisterer.com veröffentlicht werden</span></label></span></span></span> </div> </div> <div class="row5"> <div class=""><input type="submit" value="Absenden" class="wpcf7-form-control wpcf7-submit formbutton"> </div> </div> <div class="wpcf7-response-output" role="alert" aria-hidden="true"></div></form></strong></div> <p></p> </div>

Answer 1

It is the outline on the:focus selector edit your css to this.

Input.checkbox:focus {
    border: 1px solid #ff9357!important;
    background-color: #fff!important;
    border-radius: 2px!important;
    outline: none;
}