Customize the Contact Form 7 Chekbox

Question

Customize the Contact Form 7 Chekbox

Navigation

#1 by (0 votes)

0

I'm trying to customize a contact form checkbox 7, wordpress, but I'm not getting results! It should look like this:

Anditlookslikethis:

Thecodeinthecontactformisthis:

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

Here is the code I got for this area browser:

<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 do not know if it helps !!

css wordpress checkbox

asked by anonymous 06.03.2017 / 15:15

1 answer

I need to select ranges concatenating addresses in VBA Error importing database Wordpress database

score 0 · Answer 1

If there is a CSS for the checkbox but it is not working maybe it will not clear the look of them:

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

After only setting a normal background and state checked. For example:

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

And in label2 (I found this tag strange, should it not be just a label?) If you add "display: inline-block" you should "unselect" the select above it.

Editing: You can use the span just after the checkbox that is with the wpcf7-list-item-label class doing 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 still have to create the situation: checked, example:

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