State ของ element — hover, focus, active, disabled

Chrome 148.0.7778.280 (macOS)
CSS Selectors Level 4        # นิยามของ :hover :focus :focus-visible :active
HTML Living Standard         # นิยามของ :enabled / :disabled

1 · State คืออะไร — element ตัวเดิม แต่หน้าตาไม่เหมือนเดิม

ลองนึกถึงปุ่ม "บันทึก" ปุ่มเดียวในหน้าเว็บ ปุ่มนั้นมีหลายช่วงชีวิต:

• ตอนอยู่เฉย ๆ — สีปกติ รอให้คนมาใช้
• ตอนเมาส์ลอยอยู่เหนือมัน — ควรเข้มขึ้นนิดหนึ่ง เพื่อบอกว่า "อันนี้กดได้นะ"
• ตอนคนกด Tab เดินมาถึงมัน — ควรมีกรอบล้อมรอบ เพื่อบอกว่า "ตอนนี้คุณอยู่ตรงนี้"
• ตอนกำลังกดค้างอยู่ — ควรยุบลงไปนิดหนึ่ง ให้รู้สึกว่ากดติดแล้ว
• ตอนถูกปิดไว้ (เช่นยังกรอกฟอร์มไม่ครบ) — ควรจางลง และกดไม่ได้จริง ๆ

ห้าอย่างนี้คือ element ตัวเดียวกัน ไม่ใช่ห้าปุ่ม
สิ่งที่ CSS ให้เรามาคือวิธีเขียนกฎแยกไว้คนละบรรทัด แล้วเบราว์เซอร์จะสลับให้เองตามสิ่งที่ผู้ใช้ทำ เราไม่ต้องเขียนโค้ดสั่งสลับ

ลองของจริงเลย ปุ่มสองปุ่มข้างล่างนี้เขียนด้วย CSS ล้วน ไม่มี JavaScript
เอาเมาส์ไปชี้ · กดค้าง · แล้วลองคลิกในกล่องแล้วกด Tab

<style>
  .btn {
    font: inherit;
    padding: 10px 20px;
    border: 0;
    border-radius: 8px;
    background: #b49a9c;
    color: #ffffff;
    cursor: pointer;
  }
  .btn:hover          { background: #96797c; }
  .btn:active         { background: #6f5559; }
  .btn:focus-visible { outline: 3px solid #1a73e8; outline-offset: 2px; }
  .btn:disabled       { background: #e4e4e4; color: #a0a0a0; cursor: not-allowed; }
</style>

<button class="btn">ปุ่มที่ใช้งานได้</button>
<button class="btn" disabled>ปุ่มที่ถูกปิดไว้</button>

สังเกตว่าเราเขียนกฎ 4 บรรทัดเพิ่มจากของเดิม แล้วได้พฤติกรรมครบทั้งชุด
สิ่งที่ทำให้มันเป็นไปได้คือเครื่องหมาย : ที่ต่อท้าย selector — หัวข้อถัดไปเราจะไล่ทีละตัวว่าแต่ละตัวจับ "ช่วงเวลา" ไหน

2 · :hover — ตอนที่เมาส์ลอยอยู่เหนือมัน

:hover เป็นจริงตั้งแต่วินาทีที่ตัวชี้เมาส์เข้ามาอยู่ในพื้นที่ของ element และเป็นเท็จทันทีที่เมาส์ออกไป ไม่เกี่ยวกับการคลิกเลย
ใช้กับ element อะไรก็ได้ ไม่ใช่แค่ปุ่ม — <div> <tr> <li> ก็ hover ได้หมด

<style>
  .row {
    padding: 10px 14px;
    border-bottom: 1px solid #e0e0e0;
    transition: background 0.15s;
  }
  .row:hover { background: #f3ece9; }
</style>

<div class="row">ผัดกะเพราหมูสับ</div>
<div class="row">ต้มยำกุ้งน้ำข้น</div>
<div class="row">ข้าวมันไก่ต้ม</div>

transition ที่ใส่ไว้ทำให้สีค่อย ๆ เปลี่ยนแทนที่จะกระโดด — ไม่ใส่ก็ทำงานได้ แต่ใส่แล้วรู้สึกนุ่มขึ้นมาก และต้องใส่ที่กฎปกติ ไม่ใช่ที่ :hover ไม่งั้นตอนเมาส์ออกจะกระตุกกลับทันที

ถ้าอยากเขียนสไตล์ที่ เฉพาะเครื่องที่มีเมาส์จริงเท่านั้นถึงจะใช้ ให้ครอบด้วย media query ที่ถามเรื่องความสามารถของอุปกรณ์ ไม่ใช่ถามความกว้างจอ:

/* ใช้กฎนี้เฉพาะเครื่องที่มีตัวชี้ซึ่ง hover ได้จริง (เมาส์ / trackpad) */
@media (hover: hover) {
  .card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.18); }
}

3 · :focus กับ :focus-visible — จุดที่คนทำเว็บพังกันมากที่สุด

focus แปลว่า "ตอนนี้คีย์บอร์ดคุยอยู่กับ element ตัวนี้"
ในหน้าเว็บหนึ่งหน้า มี element ที่ได้ focus ได้แค่ตัวเดียวในเวลาเดียวกัน ถ้าคุณพิมพ์ตัวอักษร มันจะไปโผล่ที่ช่องที่ focus อยู่ ถ้าคุณกด Enter มันจะกดปุ่มที่ focus อยู่
วิธีย้าย focus มีหลายทาง: คลิก · กด Tab ไปข้างหน้า · Shift+Tab ถอยหลัง · สั่งด้วยเสียง · หรือใช้ปุ่มบนอุปกรณ์ช่วยเหลือ

ทีนี้ปัญหาจริงที่ทำให้เกิด :focus-visible ขึ้นมา:

แถวกลางคือหัวใจ — สมัยก่อนที่มีแต่ :focus ทุกครั้งที่ผู้ใช้เมาส์คลิกปุ่ม จะมีกรอบดำ ๆ ค้างอยู่รอบปุ่มจนกว่าจะไปคลิกที่อื่น นักออกแบบเกลียดมันมาก
วิธีที่คนแก้กันคือเขียนบรรทัดนี้ — และมันคือบรรทัดที่ทำลาย accessibility ของเว็บมากที่สุดในประวัติศาสตร์:

/* ห้ามเขียนแบบนี้เด็ดขาด */
button:focus { outline: none; }

ทางแก้ที่ถูกคือ อย่าลบ — ให้เปลี่ยนแทน โดยย้ายกรอบไปไว้ที่ :focus-visible ซึ่งเบราว์เซอร์จะเปิดให้เฉพาะตอนที่มัน "คิดว่าผู้ใช้ต้องการเห็นกรอบ" (คือตอนใช้คีย์บอร์ด)

<style>
  .pill {
    font: inherit;
    padding: 10px 18px;
    margin-right: 8px;
    border: 1px solid #c9bcbd;
    border-radius: 999px;
    background: #ffffff;
    cursor: pointer;
  }

  /* ✅ ถูก: ลบของ default แล้ววาดของเราแทน ในเงื่อนไขที่ควรเห็น */
  .pill:focus         { outline: none; }
  .pill:focus-visible { outline: 3px solid #1a73e8; outline-offset: 3px; }

  /* ❌ ผิด: ลบทิ้งเฉย ๆ ไม่วาดอะไรกลับมา */
  .ghost:focus { outline: none; }
</style>

<button class="pill">ปุ่มที่ทำถูก</button>
<button class="pill ghost">ปุ่มที่ทำผิด</button>

ลองเองตรงนี้: คลิกในกล่องผลลัพธ์ข้างบนหนึ่งครั้ง แล้วกด Tab ไปเรื่อย ๆ
ปุ่มซ้ายจะมีวงแหวนสีน้ำเงินโผล่มาให้เห็นชัดว่าคุณอยู่ตรงไหน
ส่วนปุ่มขวา — คุณจะรู้ว่าตัวเองยืนอยู่บนมันก็ต่อเมื่อกด Enter แล้วมีอะไรเกิดขึ้นเท่านั้น
ความรู้สึกอึดอัดตอนนั้น คือความรู้สึกที่ผู้ใช้จริงเจอทุกหน้าที่คุณเขียน outline: none ทิ้งไว้

4 · :active — ตอนกำลังกดค้างอยู่

:active เป็นจริงในช่วงเวลาสั้น ๆ คือตั้งแต่ปุ่มเมาส์กดลง จนถึงตอนปล่อย
สไลด์เรียก state นี้ว่า Pressed ซึ่งเป็นคำที่ทีม design ใช้ ส่วนใน CSS มันชื่อ :active — คนละคำ ของอันเดียวกัน จำไว้ว่าเวลาคุยกับ designer เขาจะพูดว่า "pressed" ไม่ใช่ "active"

<style>
  .push {
    font: inherit;
    padding: 12px 24px;
    border: 0;
    border-radius: 8px;
    background: #b49a9c;
    color: #ffffff;
    cursor: pointer;
  }
  .push:active { background: #6f5559; }
  .push:hover  { background: #96797c; }
</style>

<button class="push">กดค้างที่ปุ่มนี้</button>

โค้ดชุดเดียวกันนี้เอาไปเรนเดอร์จริงแล้วเป็นแบบนี้ — ลองกดค้างดูเอง จะเห็นว่ามันไม่เข้มสุดจริง ๆ

5 · :disabled และ :enabled — ปิดจริง ไม่ใช่แค่ทำให้จาง

disabled เป็นattribute ใน HTML ไม่ใช่ CSS พอแปะเข้าไป เบราว์เซอร์จะทำสามอย่างให้ทันทีโดยเราไม่ต้องเขียนอะไรเลย:

1. กดแล้วไม่มีอะไรเกิดขึ้น — event click ไม่ยิงออกมาเลย
2. กด Tab ข้ามมันไป — โฟกัสไม่เข้า
3. ถ้าอยู่ในฟอร์ม ค่าของมันจะไม่ถูกส่งไปกับฟอร์ม

ส่วน :disabled กับ :enabled ใน CSS คือ pseudo-class ที่ตามหาว่าตัวไหนถูกปิดอยู่ เพื่อให้เราเปลี่ยนหน้าตาตาม

ข้อควรระวังที่คนไม่ค่อยรู้: :enabled กับ :disabled ใช้ได้กับ form control เท่านั้น ผมลองในเบราว์เซอร์แล้วได้ผลนี้:

แถวสุดท้ายคือหลักฐานว่า disabled ปิดของจริง ไม่ใช่แค่หน้าตา — แม้แต่โค้ดที่สั่งกดตรง ๆ ก็ยังไม่ผ่าน
ส่วนสองแถวกลางแปลว่า ถ้าคุณทำ "ปุ่ม" ด้วย <div> คุณจะไม่ได้อะไรจาก disabled เลย — เป็นอีกหนึ่งเหตุผลที่ปุ่มควรเป็น <button> จริง ๆ

<style>
  input, button {
    font: inherit;
    padding: 8px 12px;
    border: 1px solid #c9bcbd;
    border-radius: 6px;
  }
  input:enabled  { background: #ffffff; }
  input:disabled { background: #f0f0f0; color: #9a9a9a; cursor: not-allowed; }

  /* ปิดยกชุดด้วย fieldset ตัวเดียว — ของข้างในโดนหมด */
  fieldset { border: 1px dashed #c9bcbd; border-radius: 8px; }
  fieldset:disabled { opacity: 0.6; }
</style>

<input value="ช่องนี้พิมพ์ได้">
<input value="ช่องนี้ถูกปิด" disabled>

<fieldset disabled>
  <legend>ปิดทั้งกล่องด้วย fieldset</legend>
  <input value="ตัวนี้ไม่ได้แปะ disabled เอง">
  <button>แต่ก็กดไม่ได้</button>
</fieldset>

ลองกด Tab ไล่ในกล่องข้างบนดู — คุณจะข้ามช่องที่ปิดไว้ไปเองโดยอัตโนมัติ และเข้าไปในกรอบ fieldset ไม่ได้เลย ทั้งที่ข้างในไม่ได้แปะ disabled ทีละตัว

6 · "Dragged" ในสไลด์ — state ที่ CSS ไม่มีให้

สไลด์หน้า 63 ใส่ state ชื่อ Dragged (ตอนผู้ใช้กดแล้วลากของ) ไว้ในชุดเดียวกับตัวอื่น
แต่ถ้าคุณไปหา :dragged ใน CSS คุณจะไม่เจอ เพราะมันไม่มีอยู่จริง

ในทางปฏิบัติ สิ่งที่ทำได้ด้วย CSS ล้วนคือบอกใบ้ด้วยรูปตัวชี้เมาส์: cursor: grab แปลว่า "จับได้นะ" และ cursor: grabbing แปลว่า "กำลังจับอยู่" ซึ่งจับคู่กับ :active ได้พอดี

<style>
  .chip {
    display: inline-block;
    padding: 12px 20px;
    border-radius: 10px;
    background: #b49a9c;
    color: #ffffff;
    cursor: grab;              /* มือเปิด = ลากได้ */
    user-select: none;
  }
  .chip:active {
    cursor: grabbing;          /* มือกำ = กำลังลาก */
    box-shadow: 0 6px 14px rgba(0,0,0,0.25);
  }
</style>

<div class="chip">กดค้างที่การ์ดนี้แล้วดูตัวชี้เมาส์</div>

ส่วน "การลากของจริง ๆ ให้ย้ายที่ได้" ต้องใช้ JavaScript เข้ามาช่วย โดยตอนเริ่มลากก็แปะ class เช่น .is-dragging เข้าไปเอง แล้วเขียน CSS รับที่ class นั้น
เรื่องนี้อยู่นอกขอบเขตบทนี้ แต่รู้ไว้ว่าทุกครั้งที่ design system พูดถึง state ที่ CSS ไม่มีให้ วิธีแก้คือแปะ class เอง — ไม่ใช่ไปหา pseudo-class แปลก ๆ มาใช้

7 · สรุปรวม — เขียนเรียงลำดับยังไงถึงไม่ทับกันเอง

8 · ที่ฝึกต่อ และคู่มือที่ควรรู้ว่ามีอยู่

สไลด์ปิดท้ายด้วยลิงก์สองชุด ผมแยกให้ชัดว่าชุดไหนใช้ทำอะไร เพราะสองชุดนี้คนละหน้าที่กันเลย

ชุดที่ 1 — เกมฝึกมือ (เล่นตอนอยากได้ความคล่อง)

ชุดที่ 2 — คู่มือที่เอาไว้เปิดตอนต้องตัดสินใจ

สี่อันนี้ไม่ใช่ของที่อ่านรวดเดียวจบ — ไม่มีใครอ่านหมด และไม่ต้องอ่านหมด
หน้าที่ของมันคือ "เวลาไม่แน่ใจว่าควรทำยังไง ให้เปิดดูว่าคนที่คิดเรื่องนี้มาสิบปีแล้วเขาสรุปว่าไง"

9 · ทดสอบความเข้าใจ

อ้างอิง

• MDN — :focus-visible — อ่านหัวข้อ focus-visible vs focus ย่อหน้าเดียว แล้วเลื่อนลงไปดูตัวอย่างที่เขาเทียบปุ่มกับ <input> ให้ดู จะเห็นว่าทำไมช่องกรอกข้อความได้กรอบแม้คลิกด้วยเมาส์ แต่ปุ่มไม่ได้
• WCAG 2.1 — ข้อ 2.4.7 Focus Visible — อ่านแค่ประโยคเดียวของข้อนี้ (ยาวสองบรรทัด) แล้วคุณจะมีข้ออ้างที่เป็นมาตรฐานสากล ไว้ตอบทีม design ที่ขอให้ลบกรอบ focus ทิ้ง
• MDN — media feature hover — ดูตารางค่าที่รับได้ (none / hover) และอ่านหมายเหตุเรื่องอุปกรณ์ที่มีทั้งจอสัมผัสและเมาส์ ซึ่งเป็นเคสที่ทำให้หลายคนพลาด
• MDN — :disabled — อ่านบรรทัดที่ระบุว่าใช้กับ element ชนิดไหนได้บ้าง จะเห็นว่ามีแต่ form control กับ <fieldset> · ไม่มี <div> และไม่มี <a>
• Material Design 3 — ไปที่ Foundations → Interaction states ซึ่งเป็นที่มาโดยตรงของรายการ state ในสไลด์หน้า 58–64 (enabled · hover · focused · pressed · dragged · disabled) ใช้เทียบดูว่าสไลด์ตัดอะไรออกไปบ้าง
• CSS-Tricks Guides — ไม่ต้องอ่านทั้งหน้า ให้บุ๊กมาร์กไว้แล้วเปิดตอนติดเรื่อง property ตัวใดตัวหนึ่ง เป็นแหล่งที่อธิบายพร้อมภาพประกอบดีที่สุดสำหรับมือใหม่