第6车厢-恩~人家被勾到了拉:checked应用篇

本篇介绍伪类中的状态选取器:checked应用篇:做一个开关按钮

:checked介绍

:checked是分类在本刊第4篇选取器 > 伪类别(pseudo-class) > 状态选取器中，
简单来说是判断是否被勾选/取消勾选的选取器，可用在input type="checkbox" 或 input type="radio"或 select 中的 option

详细可参考MDN介绍

常见的状态选取器还有哪些?

:hover
:focus ...等

:checked 特色

结合label标签使用，透过label标签能够让样式(外观)的更为丰富
透过CSS就能做到"被勾选了...就能改变谁谁的外观"，不用靠js来做

本篇范例:做一个开关

整体流程是:
做一个开关所需的外观label及 label::before > 搭配:checked 以及 相邻兄弟选择器+ > 将按钮移动+变色

/*html*/
<div>
  <input type="checkbox" id="demoCheckbox">
  
  <label for="demoCheckbox" class="labelCheckbox">  </label>
</div>

/*css*/
#demoCheckbox{
  display:none;
}

.labelCheckbox{
    position: relative;
    width: 50px;
    height: 22px;
    padding: 3px;
    box-sizing: border-box;
    border-radius: 25px;
    background-color: #838383;
    display: inline-block;
}

.labelCheckbox::before{
    content: '';
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 3px;
    bottom: 0;
    margin: auto;
    transition: left 0.5s;
}

#demoCheckbox:checked + .labelCheckbox::before {
      left: 31px; 
}

#demoCheckbox:checked + .labelCheckbox {
  background-color: rgba(25, 150, 250, 0.9
);

当然有多种写法，只是如上写法，对於是新手的我，觉得比较好了解
附上程序码连结

小提醒:

input id="name"与 label for="name"，name这二个名称要一致喔!
这样才能透过点了label的外观，可以触发input checked的状态！
input checkbox 只是拿来利用的，最後没有要出现在画面上，所以会将它display:none起来; ~~用过就丢~~
相邻兄弟选择器 + 以及 一般兄弟选择器 ~ 这个观念要去分辨喔!因为范例中摆放位置的关系，其实也可以用 一般兄弟选择器 ~