CSS - When you click on a checkbox... paint a TD

Asked

Viewed 611 times

1

Here’s what I’m trying to do:
By clicking on a check box, she paints the background orange...
I needed you to also paint the background of TD, because currently only painting the background of the label...
How can I paint the background together? 

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>

css html5
  • 1

    have javascript knowledge? , most likely the following answer will be using it.

  • I’m studying Javascript too, but if I had a medium via CSS would be perfect, but if in this case it will only be by Java, I understand

2 answers

1


I created a blog text explaining in detail how I arrived at the solution below.

Dude, you won’t be able to color the TD background like this. You can’t catch the element Parent in a css selector.

What you can do is, by clicking, add to td (Parent) a class 'Selected' or name you want. Then you style everything based on this class.

To add the class in the click, you must use jquery or vanilla js (which is pure Js).

Below is an example for you:

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>

  • I got it !! Thank you very much @José

  • Joseph, an adequate response, has examples of how the thing works. Remembering that the problem is not solved only with framworks, the pure javascript also solves the problem, although Jquery is a hand nothing runs :)

  • 1

    It is worth remembering that soon we will have as reference the parent element with css, specification https://developer.mozilla.org/en-US/docs/Web/CSS/:

  • Then it’ll make it easier !!

  • @Bsalvo 'vanilla js' quoted in the answer is the pure js ;) rsrs. Truth, I’ll put an example of how it would look with pure js and jquery. Valew for the tip.

0

As you mentioned in the comments that you would like a version only with CSS made this template that can suit you.

I haven’t touched your HTML just a few lines of 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>

Browser other questions tagged css html5

You are not signed in. Login or sign up in order to post.