Question

我正在尝试在检查所述行中的复选框时更改单个输入元素的样式。我尝试了许多“〜”，“+”的组合，有和没有类标识符，无济于事。我知道如何使用Javascript创建一个变通方法，我知道CSS不允许祖先选择有很多好的理由，但我想知道你是否可以以任何方式使用CSS来完成这项任务。

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>

Answer 1

全部在选择器中：使用伪选择器:checked和符号+选择正确状态的正确元素。

.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>

Answer 2

不幸的是，现有的CSS组合器只允许在一个公共父元素中选择元素，稍后在源顺序中选择元素。目前无法选择元素的祖先或先前的兄弟。因此，无法根据内容的状态（例如tr）设置容器的样式（例如input）。可以根据前一个输入的状态更改下一个输入（如Ivan的答案所示），但前提是它们位于同一容器中，这使得无法将它们格式化为不同的表格单元格（可以这样做）但是，使用CSS网格布局，但它需要更平坦的标记结构，因为所有网格项都必须是一个网格容器的子项。）

基于<label>元素无论其在源代码中的位置如何都能将点击转移到链接<input>这一事实，有一个非常糟糕的解决方法。我们可以使实际的复选框不可见，将它们放在表之前，然后使用下面的兄弟和后代组合器设置我们需要的表的任何部分，并使标签看起来好像是复选框。快速演示/概念验证：

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>

但老实说，我不建议在制作中使用这种方法。

使用CSS

2 个答案: