0

Estou tentando fazer o seguinte:
Ao clicar em uma check box, ela pinta o fundo de laranja...
Precisava que pintasse também o background da TD, pois atualmente só está pintando o fundo da label...
Como posso pintar juntamente o fundo da td?

input.check-genero:hover + label,
input.check-genero:checked + label{
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}

/* Tabela conteúdo */
table.tabela-categoria{
border: solid 15px #fff;
}

.tabela-categoria td{
border: solid 2px #d3d1d1;
text-align: center;
padding: 5px;
width: 140px;
}

.categoria + label{
font-family: verdana;
font-size: 1.2em;
color: #727176;
cursor: pointer;
}

.categoria:hover + label,
.categoria:checked + label{
color: #ffffff;
background-color:#FF6600;
}
<tr>
    <td>
        <input type="checkbox" name="cont10" id="estilo" class="categoria">
        <label for="estilo">ESTILO</label>
    </td>
    <td>
        <input type="checkbox" name="cont11" id="entretenimento" class="categoria">
        <label for="entretenimento">ENTRETENIMENTO</label>
    </td>
    <td>
        <input type="checkbox" name="cont12" id="familia" class="categoria">
        <label for="familia">TESTE</label>
    </td>
</tr>

2
  • 1
    possuí conhecimento em javascript?, muito provavelmente a resposta a seguir será utilizando ele.
    – Bsalvo
    17/10/2017 às 13:06
  • Estou estudando JavaScript também, porém se tivesse um meio via CSS seria perfeito, mas se neste caso será somente por javaScript, eu entendo
    – Sora
    17/10/2017 às 13:08

2 Respostas 2

1

Cara, vc não vai conseguir colorir o fundo da TD assim. Vc não consegue pegar o elemento parent num seletor css.

O que vc pode fazer é, ao clicar, adicionar na td (parent) uma classe 'selected' ou de nome que desejar. Então você estiliza tudo baseado nessa classe.

Para adicionar a classe no click, você deve usar jquery ou vanilla js (que é o Js puro).

Abaixo tem um exemplo para você:

var $table = document.querySelector('.minha-table');

$table.addEventListener("click", function(ev){  
  if (ev.target.tagName == "INPUT") {
    if (ev.target.checked) {
      ev.target.parentNode.parentNode.classList.add("selected");
    }else {
      ev.target.parentNode.parentNode.classList.remove("selected");
    }
  }
});
table td {
  padding: 5px;
  background: #ccc;
}

td.selected {
  background: #f00;
}
<table class="minha-table">
  <tr>
    <td><label><input type="checkbox"> teste </label></td>
    <td><label><input type="checkbox"> teste </label></td>
    <td><label><input type="checkbox"> teste </label></td>
  </tr>
</table>

Criei um texto no blog explicando detalhadamente como cheguei na solução abaixo.

5
  • Entendi !! Muito obrigado @José
    – Sora
    17/10/2017 às 13:12
  • José, uma resposta adequada, tem exemplos de como a coisa funciona. Lembrando que o problema não é resolvido apenas com framworks, o javascript puro também resolve o problema, apesar do Jquery ser uma mão nada roda :)
    – Bsalvo
    17/10/2017 às 13:14
  • 1
    Vale lembrar que logo logo teremos como referenciar o elemento pai com css, especificação developer.mozilla.org/en-US/docs/Web/CSS/:has 17/10/2017 às 13:19
  • Aí facilitará muito !!
    – Sora
    17/10/2017 às 13:25
  • @Bsalvo 'vanilla js' citado na resposta é o js puro ;) rsrs. Verdade, vou colocar um exemplo de como ficaria com js puro e jquery. Valew pela dica. 18/10/2017 às 19:54
0

Como vc falou nos comentários que gostaria de uma versão apenas com CSS fiz esse modelo que pode te atender.

Não mexi no seu HTML apenas algumas linhas do CSS

input.check-genero:hover + label,
input.check-genero:checked + label{
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}

/* Tabela conteúdo */
table.tabela-categoria{
border: solid 15px #fff;
}

.tabela-categoria td{
border: solid 2px #d3d1d1;
text-align: center;
padding: 5px;
width: 140px;
}

.categoria + label{
font-family: verdana;
font-size: 1.2em;
color: #727176;
cursor: pointer;
}

.categoria:checked + label{
color: #ffffff;
background-color:#FF6600;
}
.categoria:checked + label::after{
content: "";
background-color:#FF6600;
background-size: 100%;
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
td {
position: relative;
}
<table>
	<tr>
		<td>
			<input type="checkbox" name="cont10" id="estilo" class="categoria">
			<label for="estilo">ESTILO</label>
		</td>
		<td>
			<input type="checkbox" name="cont11" id="entretenimento" class="categoria">
			<label for="entretenimento">ENTRETENIMENTO</label>
		</td>
		<td>
			<input type="checkbox" name="cont12" id="familia" class="categoria">
			<label for="familia">TESTE</label>
		</td>
	</tr>
</table>

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .