我有一个证明表，我的客户可以留下他们的证明，下面的复选框得到一个黑色边框，我不知道它是从哪里来的。

黑色边框在点击复选框后会变得可见，只有在点击内容的其他地方后才会消失。 我曾尝试用:focus和:active类来操作它，但都不起作用。

此外，这是在WordPress中用联系人表单7生成的表单

您可以在此查看表格:https://www.renepfisterer.com/akademie/testimonials

null

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 (z.B. 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>

null