html - 是什么让 HTML 元素在没有 JavaScript 的情况下在点击事件上产生动画？

Question

我的问题可能很愚蠢，但我需要一个解释。我找到了 html 和 CSS 代码来实现 ON 和 OFF 切换器，但我真的不明白如何在没有使用点击事件的 JavaScript 的情况下实现标签动画。

有人可以向我解释一下这段代码中的技巧吗？ 我以前从未见过这个

HTML:

<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
    <span class="onoffswitch-inner"></span>
    <span class="onoffswitch-switch"></span>
</label>

CSS:

    <style>
.onoffswitch {
    position: relative; width: 109px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
    display: none;
}
.onoffswitch-label {
    display: block; overflow: hidden; cursor: pointer;
    height: 30px; padding: 0; line-height: 16px;
    border: 2px solid #999999; border-radius: 3px;
    background-color: #EEEEEE;
    transition: background-color 0.3s ease-in;
}
.onoffswitch-label:before {
    content: "OFF";
    display: block; width: 16px; margin: 0px;
    background: #FFFFFF;
    position: absolute; top: 0; bottom: 0;
    right: 91px;
    border: 2px solid #999999; border-radius: 5px;
    padding:5px;
    width:30px;
    text-align:center;
    transition: all 0.3s ease-in 0s; 
}

.onoffswitch-checkbox:checked + .onoffswitch-label {
    background-color: #00CED1;
}
.onoffswitch-checkbox:checked + .onoffswitch-label, .onoffswitch-checkbox:checked + .onoffswitch-label:before {
   border-color: #00CED1;
}
.onoffswitch-checkbox:checked + .onoffswitch-label:before {
    right: 0px; 
    content: "ON";
    padding:5px;
    width:30px;
    text-align:center;
}
</style>

谢谢。

Answer 1

当 label单击元素，它会激活其标记的元素。在本例中，带标签的元素是一个复选框。

这会导致复选框切换其 checked 属性(不是属性*)。

:checked伪选择器将匹配 input[type="checkbox"]或input[type="radio"]具有 checked 的元素属性(property)在true状态。

:checked 中的变化status 允许将新的 CSS 属性应用于 label因为整个选择器链随后匹配(或不再匹配，具体取决于现在选中还是取消选中复选框)。

CSS transition然后规则将更改的属性从一种状态动画到另一种状态。

---

这是一个简单的表单演示，可用于测试各种不同字段类型上标签的功能。请注意，由于表单位于沙盒中，提交按钮将不起作用 <iframe> .

<form action="http://example.com" target="_blank" method="get">
  <p>
    <label for="text">text</label>
    <input type="text" name="text" id="text">
  </p>
  
  <p>
    <label for="select">select</label>
    <select name="select" id="select">
      <option>1</option>
      <option>2</option>
      <option>3</option>
    </select>
  </p>
  
  <p>
    <label for="textarea">textarea</label>
    <textarea name="textarea" id="textarea" cols="30" rows="10"></textarea>
  </p>
  
  <p>
    <label for="checkbox">checkbox</label>
    <input type="checkbox" name="checkbox" id="checkbox" value="checked">
  </p>
  
  <fieldset>
    <legend>radio buttons</legend>
    <p>
      <label for="radio-1">radio 1</label>
      <input type="radio" name="radio" id="radio-1" value="1">
    </p>
    <p>
      <label for="radio-2">radio 2</label>
      <input type="radio" name="radio" id="radio-2" value="2">
    </p>
  </fieldset>
  <p>
    <label for="reset">reset</label>
    <input type="reset" id="reset" value="Reset">
  </p>
  <p>
    <label for="button">button</label>
    <button id="button" type="submit">Submit</button>
  </p>
</form>

_{* 那么为什么属性的改变很重要，而属性的改变却不那么重要呢？当您使用重置按钮( input[type="reset"] 或 button[type="reset"] )时，表单将重置为每个字段的 HTML 属性值(或 innerHTML 对于 <textarea> )。您可以通过使用 JavaScript 修改 value 来测试这一点文本字段的属性，然后重置表单以查看没有发生任何更改。}