Change marked row of html table with CSS
I am trying to change the style of input elements in one when a checkbox on a specified line is checked. I've tried many combinations of "~", "+", with and without class IDs, but to no avail. I know how to use Javascript to create a workaround, and I know that CSS does not allow ancestor selection for many good reasons, but I was wondering if you can somehow use CSS to accomplish this task.
tr td input {
font-size: 20px;
font-family: helvetica;
padding: 5px;
}
tr td input[type=checkbox]:checked+tr td input.input-item {
color: red;
font-style: italic;
text-decoration: line-through;
}
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8;charset=utf-8">
<title>Title</title>
</head>
<body>
<table>
<thead>
<tr>
<th><input type="checkbox" name="checklist-list" class="checkbox-box"></th>
<th>Item1</th>
<th>Item2</th>
</tr>
</thead>
<tbody>
<tr>
<td class="checkbox-td"><input type="checkbox" name="checklist-list" class="checkbox-box"></td>
<td class="item-td"><input class="input-item" type="text" value="Artificial"></td>
<td class="item-td"><input class="input-item" type="text" value="Amateurs"></td>
</tr>
<tr>
<td class="checkbox-td"><input type="checkbox" name="checklist-list" class="checkbox-box"></td>
<td class="item-td"><input class="input-item" type="text" value="Broken"></td>
<td class="item-td"><input class="input-item" type="text" value="Barriers"></td>
</tr>
<tr>
<td class="checkbox-td"><input type="checkbox" name="checklist-list" class="checkbox-box"></td>
<td class="item-td"><input class="input-item" type="text" value="Casual"></td>
<td class="item-td"><input class="input-item" type="text" value="Create"></td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
</body>
source to share
Unfortunately, existing CSS combiners only allow you to select elements in one common parent and then in original order. There is currently no way to select an item's ancestor or previous sibling. Thus, it is not possible to style a container (for example tr
) based on the state of the content (for example input
). It is possible to change the following inputs based on the state of the previous one (as shown in Ivan's answer), but only if they are in the same container, which makes it impossible to format them as different table cells (this can be done this way with the CSS Grid layout, but it would require even more flat layout structure since all grid items must be children of the same grid container).
There is one terrible hacky solution for this, based on the fact that an element <label>
can pass a click to a linked one <input>
, regardless of its position in the source code. We can make the actual checkboxes invisible, put them in front of the table, and then draw whatever part of the table we need using the following siblings and descendant compilers and make the labels look like they were checkboxes. Quick demo / proof of concept:
tr td input {
font-size: 20px;
font-family: helvetica;
padding: 5px;
}
[type="checkbox"] {
position: absolute;
clip: rect(0 0 0 0);
width: 0;
height: 0;
overflow: hidden;
}
.fake-checkbox {
display: inline-flex;
width: .8em;
height: .8em;
border: 2px inset #ccc;
justify-content: center;
align-content: center;
vertical-align: middle;
}
#checkbox0:checked ~ table [for="checkbox0"]::before,
#checkbox1:checked ~ table [for="checkbox1"]::before,
#checkbox2:checked ~ table [for="checkbox2"]::before {
content: '✔';
line-height: 1;
}
#checkbox0:checked ~ table #checkbox0-tr td input.input-item,
#checkbox1:checked ~ table #checkbox1-tr td input.input-item,
#checkbox2:checked ~ table #checkbox2-tr td input.input-item {
color: red;
font-style: italic;
text-decoration: line-through;
}
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8;charset=utf-8">
<title>Title</title>
</head>
<body>
<input type="checkbox" name="checklist-list" class="checkbox-box" id="checkbox0">
<input type="checkbox" name="checklist-list" class="checkbox-box" id="checkbox1">
<input type="checkbox" name="checklist-list" class="checkbox-box" id="checkbox2">
<table>
<thead>
<tr>
<th><input type="checkbox" name="checklist-list" class="checkbox-box"></th>
<th>Item1</th>
<th>Item2</th>
</tr>
</thead>
<tbody>
<tr id="checkbox0-tr">
<td class="checkbox-td"><label for="checkbox0" class="fake-checkbox"></label></td>
<td class="item-td"><input class="input-item" type="text" value="Artificial"></td>
<td class="item-td"><input class="input-item" type="text" value="Amateurs"></td>
</tr>
<tr id="checkbox1-tr">
<td class="checkbox-td"><label for="checkbox1" class="fake-checkbox"></label></td>
<td class="item-td"><input class="input-item" type="text" value="Broken"></td>
<td class="item-td"><input class="input-item" type="text" value="Barriers"></td>
</tr>
<tr id="checkbox2-tr">
<td class="checkbox-td"><label for="checkbox2" class="fake-checkbox"></label></td>
<td class="item-td"><input class="input-item" type="text" value="Casual"></td>
<td class="item-td"><input class="input-item" type="text" value="Create"></td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
</body>
But to be honest, I would not recommend using this approach in production.
source to share
Everything in selectors: use a pseudo selector :checked
and sign +
to select the correct element in the correct state.
.check-with-label:checked + .input-for-check {
color: red;
font-style: italic;
text-decoration: line-through;
}
<div>
<input type="checkbox" class="check-with-label" id="idinput" />
<input class="input-for-check" type="text" name="input-field">
</div>
source to share