切换输入字段可编辑

Question

我想让表单字段仅在单击按钮后才可编辑，无需 Javascript。在第一个状态（只读），我想让框架不可见并将指针事件设置为“无”。该按钮应该是一个复选框，但对输入字段没有影响，与下面的测试框架不同。

label.toggle {color:white; background: darkred;padding: 0.1rem .3rem;border-radius: 0.5rem;}
.visually-hidden {position: absolute;left: -100vw;}

.toggle_edit {color:black;   border:1px solid #FFFFFF;}
#toggle:checked ~ .toggle_edit {color:darkred; border:1px solid #000000;}
                  input.toggle_edit {color:black; border:1px solid #FFFFFF;}
#toggle:checked ~ input.toggle_edit {color:darkred;  border:1px solid #000000; pointer-events: none;}

<div> <!-- toggle -->
  <label class="toggle" for="toggle">bearbeiten</label><input type="checkbox" id="toggle" class="visually-hidden">
  <table>
    <form action="functions/edit.php" method="post" target="editframe"> 
      <tr>
        <th>Name</th>
        <td><input type="text" class="toggle_edit" name="justus" value="Justus" size="30" maxlength="50" ></td>
      </tr> 
      <input type="Submit" name="absenden" value="absenden"></form>
  </table>
  <div class="toggle_edit">Testframe</div> 
</div> <!-- toggle -->

Answer 1

主要问题是~（“通用兄弟组合器”）选择了在~（https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator）之前的元素之后的sibling元素。

在您的示例中，input.toggle_edit 不是复选框的兄弟（“Geschwister”）。相反，它的祖先 table 是兄弟姐妹。因此，您必须添加 table，如下面的 CSS 中的 #toggle:checked~table input.toggle_edit 行所示。

我还了解到，如果选中该复选框，您希望 input 可以编辑。您的代码似乎想做相反的事情。这就是为什么我将pointer-events: none 替换为pointer-events:auto 并在稍后添加pointer-events:none。

<div> <!-- toggle -->
  <label class="toggle" for="toggle">bearbeiten</label><input type="checkbox" id="toggle" class="visually-hidden">
  <table>
    <form action="functions/edit.php" method="post" target="editframe"> 
      <tr>
        <th>Name</th>
        <td><input type="text" class="toggle_edit" name="justus" value="Justus" size="30" maxlength="50" ></td>
      </tr> 
      <input type="Submit" name="absenden" value="absenden"></form>
  </table>
  <div class="testframe">Testframe</div> 
</div> <!-- toggle -->

label.toggle {
  color: white;
  background: darkred;
  padding: 0.1rem .3rem;
  border-radius: 0.5rem;
}

.visually-hidden {
  position: absolute;
  left: -100vw;
}

.toggle_edit {
  color: black;
  border: 1px solid #FFFFFF;
}

#toggle:checked~.toggle_edit {
  color: darkred;
  border: 1px solid #000000;
}

input.toggle_edit {
  color: black;
  border: 1px solid #FFFFFF;
}

/* main problem was the missing table on the next line*/
#toggle:checked~table input.toggle_edit {
  color: darkred;
  border: 1px solid #000000;
  pointer-events: auto;
}

.toggle_edit {
  pointer-events: none;
}

#toggle:checked~table~.testframe {
  visibility:hidden;
}