CSS - Clicking on a checkbox ... painting a TD

Question

CSS - Clicking on a checkbox ... painting a TD

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

I'm trying to do the following:
Clicking on a check box, she paints the orange background ...
I needed you to paint the TD background too, because you're currently only painting the bottom of the label ...
How can I paint together the bottom of the 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>

html5 css

asked by anonymous 17.10.2017 / 14:53

2 answers

0

As you said in the comments that I would like a version with only CSS I made this template that can serve you.

I did not move your CSS 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>

18.02.2018 / 19:10

Angular 4 - Call function of the Component through the service Return to the menu

score 1 · Accepted Answer

I created a text on the blog explaining detail how I came up with the solution below.

Dude, you will not be able to color the TD background like this. You can not get the parent element in a css selector.

What you can do is, when clicking, add in td (parent) a class 'selected' or name you want. So you style everything based on that class.

To add the class in the click, you should 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>