切换输入字段可编辑

Question

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

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

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

在您的示例中，input.toggle_edit 不是复选框的同级（“Geschwister”）。相反，它的祖先 table 是兄弟。因此，您必须按照下面 #toggle:checked~table input.toggle_edit.

行中的 CSS 所示添加 table

另外，我了解到您希望 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;
}

切换输入字段可编辑

toggle input field editable

css

checkbox

input

toggle