การจัดรูปแบบช่องทำเครื่องหมาย

ใช้ HTML เชิงความหมายที่เข้าถึงได้โดยให้ช่องทำเครื่องหมายแต่ละช่องเชื่อมโยงกับป้ายกำกับของตนเอง ไม่ว่าจะโดยการฝัง <input> ไว้ใน <label> หรือโดยการจับคู่แอตทริบิวต์ for ของป้ายกำกับกับ id ของอินพุต

CSS สมัยใหม่มี 2 วิธีในการจัดรูปแบบช่องทำเครื่องหมาย ได้แก่ ปรับแต่งลักษณะที่ปรากฏแบบเนทีฟด้วย accent-color หรือลบล้างการนำเสนอเริ่มต้นด้วย appearance: none ในองค์ประกอบ <input type="checkbox">

การปรับแต่งแบบเนทีฟด้วย accent-color

หากต้องการจัดรูปแบบที่เรียบง่ายและสอดคล้องกับแบรนด์ซึ่งยังคงการแสดงผลแบบเนทีฟ ลักษณะการทำงานของแป้นพิมพ์ การตรวจสอบ และตัวบ่งชี้โฟกัสของระบบปฏิบัติการ ให้ใช้ accent-color

.checkbox-native {
  accent-color: #1a73e8;

  /* Sizing is controlled via relative units */
  inline-size: 1.25em;
  aspect-ratio: 1;
  margin: 0;
  cursor: pointer;
}

การจัดรูปแบบที่กำหนดเองอย่างเต็มรูปแบบด้วย appearance: none

ใช้ appearance: none เมื่อการออกแบบต้องการการควบคุมรูปร่าง ขนาด สถานะ หรือตัวบ่งชี้ของช่องทำเครื่องหมาย ซึ่งจะนำการจัดรูปแบบภาพเนทีฟออกโดยปล่อยให้ <input> เป็นเป้าหมายแบบอินเทอร์แอกทีฟ

ตั้งค่าขนาดสัมพัทธ์ที่ชัดเจนสำหรับ --checkbox-size และ --checkbox-icon-size เนื่องจาก appearance: none จะนำขนาดเริ่มต้นของเบราว์เซอร์ออก กำหนดให้ไอคอนมีขนาดเล็กกว่าช่องทำเครื่องหมายเพื่อให้มีพื้นที่สำหรับเส้นขอบและระยะห่างจากขอบของภาพ

/* Reusable SVG assets */
:root {
  --icon-check: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'></polyline></svg>");
  --icon-dash: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'><line x1='5' y1='12' x2='19' y2='12'></line></svg>");
}

/* Custom checkbox */
.checkbox-custom {
  --checkbox-size: 1.25em;
  --checkbox-icon-size: 0.7em;

  appearance: none;
  display: inline-grid;
  place-content: center;
  inline-size: var(--checkbox-size);
  aspect-ratio: 1;
  margin: 0;
  border: 2px solid currentColor;
  cursor: pointer;

  &::before {
    content: "";
    inline-size: var(--checkbox-icon-size);
    aspect-ratio: 1;
    background-color: currentColor;
    mask: var(--checkbox-icon) no-repeat center / contain;
    scale: 0;

    @media (prefers-reduced-motion: no-preference) {
      transition: scale 150ms ease;
    }

    @media (forced-colors: active) {
      background-color: CanvasText;
    }
  }

  &:checked {
    --checkbox-icon: var(--icon-check);
  }

  &:indeterminate {
    --checkbox-icon: var(--icon-dash);
  }

  &:is(:checked, :indeterminate)::before {
    scale: 1;
  }

  &:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }

  &:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }
}

สถานะไม่แน่นอน

คุณไม่สามารถตั้งค่าสถานะไม่แน่นอนผ่านแอตทริบิวต์ HTML ได้ ให้ตั้งค่าพร็อพเพอร์ตี้ indeterminate DOM ใน JavaScript (checkbox.indeterminate = true) และตรวจสอบว่าคลาสจำลอง :indeterminate มีลักษณะที่แตกต่างจากทั้งสถานะ :checked และสถานะที่ไม่ได้เลือกอย่างชัดเจน ดังนี้

• เนทีฟ (accent-color): จัดรูปแบบโดยอัตโนมัติโดยเบราว์เซอร์โดยใช้ accent-color ขององค์ประกอบ (ไม่จำเป็นต้องมีกฎ CSS :indeterminate เพิ่มเติม)
• กำหนดเอง (appearance: none): สลับ --checkbox-icon เป็น var(--icon-dash) ใน .checkbox-custom:indeterminate ตามที่แสดงด้านบน

const selectAll = document.querySelector("#select-all");
selectAll.indeterminate = true;

การช่วยเหลือพิเศษและการโต้ตอบ

• ควรใช้ :focus-visible แทน :focus เพื่อจัดรูปแบบตัวบ่งชี้โฟกัสในช่องทำเครื่องหมายที่กำหนดเอง เพื่อให้โครงร่างที่ชัดเจนปรากฏขึ้นสำหรับการไปยังส่วนต่างๆ ด้วยแป้นพิมพ์โดยไม่แสดงเมื่อคลิกตัวชี้
• อย่าใช้ outline: none หรือซ่อนตัวบอกสถานะโฟกัสในช่องทำเครื่องหมาย

• ควรตรวจสอบว่าช่องทำเครื่องหมายหรือ <label> ที่รวมอยู่มีเป้าหมายการแตะแบบอินเทอร์แอกทีฟอย่างน้อย 44px x 44px ขณะที่ยังคงขนาดช่องทำเครื่องหมายแบบภาพไว้ในหน่วยที่เกี่ยวข้อง ดังนี้

  label {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    min-block-size: 44px;
    cursor: pointer;
  }
  

• ควรระบุตัวแปรสไตล์ :disabled ที่ลดความทึบแสงและตั้งค่า cursor: not-allowed เพื่อสื่อถึงสถานะที่ไม่ได้ใช้งานอย่างชัดเจน

ปัญหาที่ควรทราบเมื่อใช้ accent-color

การแสดงผล accent-color ของเบราว์เซอร์จะแตกต่างกันไป สำหรับตัวบ่งชี้ที่มักจะวาดทับพื้นหลังสีเฉพาะจุด เช่น เครื่องหมายช่องทำเครื่องหมายและจุดปุ่มตัวเลือก เบราว์เซอร์อาจใช้การดำเนินการที่แตกต่างกัน ดังนี้

• โดยทั่วไป Chromium และ Firefox จะเลือกสีตัวบ่งชี้ที่ตัดกัน
• Safari อาจคงตัวบ่งชี้สีขาวไว้ในโหมดสว่างหรือตัวบ่งชี้สีดำในโหมดมืดแทน ขณะที่แก้ไขสีเฉพาะจุดด้านหลัง การปรับนี้ไม่ได้ให้คอนทราสต์ที่เพียงพอสำหรับทุกสีที่ระบุเสมอไป ดังนั้นให้ทดสอบชุดค่าผสมที่สำคัญใน Safari ซึ่งรวมถึงรูปแบบสีทั้งสว่างและมืด อย่าคิดว่า Safari จะเลือกสีตัวบ่งชี้ที่ให้คอนทราสต์ที่ดีที่สุดโดยอัตโนมัติ

กลยุทธ์สำรอง

การสำรองและการรองรับเบราว์เซอร์สำหรับ accent-color

พร็อพเพอร์ตี้ accent-color เป็นการเพิ่มประสิทธิภาพแบบต่อเนื่อง เบราว์เซอร์ที่ไม่รองรับพร็อพเพอร์ตี้นี้จะละเว้นและใช้สี UI เริ่มต้น

มาสก์ CSS