Customize Contact Form 7’s Chekbox

Question

I’m trying to customize a checkbox contact form 7, wordpress, but I’m not getting it! He should stay like this:

And he’s like this:

The code in the contact form is this:

<label2 style="width:99%">Disciplina<br>[checkbox* disciplina class:disciplinaform "Biologia" "Física" "Matemática" "Química"]</label2>

This is the code I picked up by the browser in this area:

<label2 style="margin-top: 26px; margin-bottom:20px; display:inline-block">Disciplina<br><span class="wpcf7-form-control-wrap disciplina"><span class="wpcf7-form-control wpcf7-checkbox disciplina" id="disciplina"><span class="wpcf7-list-item first"><input type="checkbox" name="disciplina[]" value="Biologia"><span class="wpcf7-list-item-label">Biologia</span></span><span class="wpcf7-list-item"><input type="checkbox" name="disciplina[]" value="Física"><span class="wpcf7-list-item-label">Física</span></span><span class="wpcf7-list-item"><input type="checkbox" name="disciplina[]" value="Matemática"><span class="wpcf7-list-item-label">Matemática</span></span><span class="wpcf7-list-item last"><input type="checkbox" name="disciplina[]" value="Química"><span class="wpcf7-list-item-label">Química</span></span></span></span></label2>

I don’t know if it helps!!

Answer 1

If there is a CSS for the checkbox but it is not working maybe it is missing to reset their appearance:

.disciplina > input[type="checkbox"] {
   -webkit-appearance: none;
   -moz-appearance:    none;
   appearance:         none;
}

After just set a normal background and state checked. For example:

.disciplina > input[type="checkbox"]:checked {
       background: blue;
    }

And in label2 (I found strange this tag, shouldn’t it just be label?) if you add "display: inline-block" you should "detach" from the select above it.

Editing: You can use the span right after the checkbox that is with class wpcf7-list-item-label making the pseudo element :after

.wpcf7-list-item-label:after {
    content: "";
    display: inline-block;
    width: 26px; //dimensão maior que a padrão que quiser
    height: 26px;
    background: grey;
}

You will also have to create the :checked situation, example:

input:checked + .wpcf7-list-item-label:after {
    background: blue;
  }