I am trying to change the style of input elements in a single when check box in said row is checked. I have tried many combinations of "~", "+", with and without class identifiers, to no avail. I know how to use Javascript to create a workaround, but I was wondering if you can use to accomplish this task.
Example: "Plain Jane" becomes "Hawt Mess" (plus red and line-through) when checked.
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>
Aucun commentaire:
Enregistrer un commentaire