Na minha página está aparecendo um campo a mais de checkbox antes de "Receber destaques por email". Ao clicar em um o outro também é marcado ou desmarcado.
Segue abaixo meus códigos,
HTML:
<div class="contatoCampo">
<input type="checkbox" checked value="receberDestaques" class="contatoCampo-checkbox" id="receberEmail">
<label class="contatoCampo-label" for="receberEmail">Receber destaques por email</label>
</div>
CSS:
.contatoCampo {
margin: .8em auto;
max-width: 600px;
position: relative;
}
.contatoCampo-label:before {
content:'';
vertical-align: middle;
display: inline-block;
width: 20px;
height: 20px;
text-align: center;
background-color: #fff;
transform: translate(-7px, -3px);
border: 1px solid #7D7D7D;
color: transparent;
line-height: 1;
transition: .2s ease-in;
}
.contatoCampo-checkbox:checked + .contatoCampo-label:before {
content: 'x';
color: #fff;
background-image: radial-gradient(circle, #2DA4E7, #2F80ED);
}
.contatoCampo-checkbox {
display: none;
}
.contatoCampo-icone {
position: absolute;
left: -2em;
top: 2.5em;
width: 1.5em;
}
.contatoCampo label,
.contatoCampo input,
.contatoCampo textarea {
display: block;
width: 100%;
text-align: left;
}
.contatoCampo label {
margin-bottom: 5px;
margin-left: 8px;
}
.contatoCampo input,
.contatoCampo textarea {
font-size: 1em;
padding: .5em;
min-height: 50px;
border-radius: 8px;
border: 2px solid #ccc;
outline: 0;
}
.contatoCampo input:focus,
.contatoCampo textarea:focus {
border: 2px solid #222;
}
.contatoCampo-campoDesabilitado {
background-color: #ddd;
}
.contatoCampo-msg,
.formContato-validacao {
margin-left: 4px;
margin-top: 4px;
font-size: .9em;
font-weight: bold;
color: #FD1242;
display: inline-block;
}
.contatoCampo .contatoCampo--validouFoi {
border: 2px solid #219653;
background-color: #fff;
position: relative;
}
.contatoCampo .contatoCampo--validouErro {
border: 2px solid #FF0000;
background-color: #fff;
position: relative;
}
.contatoCampo--sucesso:before {
content: '';
display: inline-block;
width: 33px;
height: 32px;
position: absolute;
z-index: 1;
right: .4em;
transform: translateY(112%) scale(.65);
background-image: url(../img/validacao-sucesso.png);
}
.contatoCampo--erro:before {
content: '';
display: inline-block;
width: 33px;
height: 32px;
position: absolute;
z-index: 1;
right: .4em;
transform: translateY(112%) scale(.65);
background-image: url(../img/validacao-erro.png);
}