ตัวสร้าง CSS Checkbox

CSS ที่สร้างทำงานอย่างไร

กฎจะถูกนำไปใช้กับ input โดยตรงด้วย appearance: none ซึ่งลบหน้าตาเริ่มต้นออกไปเพื่อให้กล่องถูกตกแต่งได้:

.checkbox {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #d1d5db;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  transition: all 0.15s ease;
}

เมื่อ checkbox ถูกติ๊ก กล่องจะเติมด้วยสีที่เลือกและมีเครื่องหมายถูกสีขาวปรากฏขึ้น โดยวาดด้วย CSS:

.checkbox:checked {
  background: #10b981;
  border-color: #10b981;
}
.checkbox:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 6px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

ทำไมต้องใช้ input พื้นฐาน

สไตล์นี้ไม่เคยแทนที่องค์ประกอบด้วย div: <input type="checkbox"> จริงยังคงการใช้งานแป้นพิมพ์ การรองรับโปรแกรมอ่านหน้าจอ และการส่งฟอร์มไว้ครบ appearance: none เปลี่ยนเพียงหน้าตาเท่านั้น หากต้องรองรับ Safari เวอร์ชันเก่า ให้เพิ่ม -webkit-appearance: none ในกฎ

โฟกัสและโฮเวอร์

กฎที่สร้างมีการเปลี่ยนสีอย่างนุ่มนวล แต่ไม่มีสไตล์โฮเวอร์หรือโฟกัส ให้เพิ่มกฎของคุณเองสำหรับ :hover และ :focus-visible เพื่อให้ผู้ใช้แป้นพิมพ์เห็นตำแหน่งโฟกัสเสมอ เช่น โครงร่างสีรอบกล่อง

เครื่องหมายถูก

เครื่องหมายถูกคือเส้นสีขาวเล็ก ๆ ที่หมุน 45 องศา หากต้องการสีอื่น หรือเส้นที่บางหรือหนากว่า ให้แก้ค่า border และ border-width ในกฎ ::after