使用input的css checked選取器應用筆記

筆記一下看完 Amos 大大的使用 input checked 妙用教學分享，完成像 App 的選取樣式

完成後樣式如下：

重點筆記

• 用 label 將 input 包起來，這樣點選裡面的文字時即可選中 input
• 使用 + 選取器來選取 input:checked 時，改變 span.btn-box 中的 span.btn 位置，即可達到切換選取後的樣式

備註： + 選取器可用來選取相鄰的下一個元素

---

建立html

<label >
    <input type="checkbox" class="checkbox">
    <span class="btn-box">
      <span class="btn"></span>
    </span>
    <span>我是文字</span>
 </label>

---

建立css樣式

label {
  cursor: pointer;
}
.checkbox {
  position: absolute;
  opacity: 0;
}
.checkbox + .btn-box {
  display: inline-block;
  width: 40px;
  height: 20px;
  border-radius: 20px;
  background: #ccc;
  box-shadow: 0 2px 0px inset rgba(0,0,0, .15);
  transition: background .2s ease-in;
  vertical-align: middle;
}

.checkbox + .btn-box .btn{
  display: inline-block; 
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #f7f7f7;
  transition: margin .2s ease-in;
  box-shadow: 0 2px 8px rgba(0,0,0,.5); 
}
.checkbox:checked + .btn-box .btn{
  margin-left: 20px;
}
.checkbox:checked + .btn-box {
  background: pink;
}

完成後的效果

See the Pen input checked 的應用 by vialley (@vialley) on CodePen.