🔹 การเปลี่ยนสีของกรอบใน input:focus

การเปลี่ยนสีของกรอบเมื่อ input element ได้รับ focus จะช่วยเน้น UI ของผู้ใช้ได้อย่างชัดเจน

**กรอบ** อยู่ภายในองค์ประกอบนั้นๆ
**ขอบเขตของผลกระทบ**: ขนาดขององค์ประกอบจะเปลี่ยนแปลงจริงๆ เนื่องจากกรอบขยายพื้นที่ขององค์ประกอบ ซึ่งอาจส่งผลกระทบต่อเลย์เอาต์
**วิธีการปรับแต่ง**: กรอบสามารถปรับรายละเอียดได้โดยใช้ `border-width`, `border-color`, `border-style` เป็นต้น
```css input:focus { border-color: #3498db; /* เปลี่ยนสีกรอบเมื่อได้รับ focus */ } ``` นอกจากนี้ มีวิธีที่คล้ายกันในการเปลี่ยน `border-color` และลบ outline โดยใช้ `input:focus`
ทั้งสองวิธีได้ผลลัพธ์ที่คล้ายกัน แต่ความแตกต่างอยู่ที่การใช้คุณสมบัติใด ทั้งสองวิธีเปลี่ยนสีกรอบเมื่อได้รับ focus แต่ตัวหนึ่งใช้ `border` และอีกตัวใช้ `outline`

💡 โค้ดบางส่วน

input:focus {
  outline-color: #4CAF50; /* เปลี่ยนสีกรอบเมื่อได้รับ focus */
}

💻 โค้ดที่ทำงานได้สมบูรณ์ (นี่คือลิงก์คัดลอกที่ทำงานได้ใน HTML)

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <title>การเปลี่ยนสีของกรอบใน input:focus</title>
  <link rel="stylesheet" href="/assets/css/template-common.css?v=1">
</head>
<body>
  <input type="text" placeholder="กรอกข้อความ">

  <style>
    input:focus {
      outline-color: #4CAF50; /* เปลี่ยนสีกรอบเมื่อได้รับ focus */
    }
  </style>
</body>
</html>

🎨 เทคนิคการออกแบบสไตล์โฟกัสที่ใช้งานได้จริง

สไตล์โฟกัสสำหรับองค์ประกอบฟอร์มเป็นสิ่งสำคัญที่ช่วยปรับปรุงการใช้งานและการเข้าถึง การตกแต่งด้วย outline-color ช่วยให้มองเห็นได้ชัดเจนในขณะใช้งานคีย์บอร์ดและรักษาความสอดคล้องของดีไซน์

🌈 การปรับแต่งสีให้เหมาะสม

#4CAF50 (สีเขียว) เป็นตัวเลือกมาตรฐาน แต่สามารถปรับให้เข้ากับธีมสีของเว็บไซต์ได้ เช่น #3498db (สีน้ำเงิน) สื่อถึงความน่าเชื่อถือ และ #ff7043 (สีส้ม) กระตุ้นความระมัดระวัง การรักษาสัดส่วนความคอนทราสต์ที่ 4.5:1 ขึ้นไปช่วยให้ผู้ใช้ที่มีปัญหาด้านการมองเห็นใช้งานได้สะดวก

✨ การตอบสนองแบบโต้ตอบ

การเพิ่ม transition: outline-color 0.3s ease ช่วยให้การเปลี่ยนสีราบรื่น เมื่อนำมารวมกับ box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.3) จะให้ความรู้สึกนุ่มนวลและทันสมัย อย่างไรก็ตาม ควรใช้อินิเมชันอย่างพอเหมาะ

📱 รองรับการออกแบบตอบสนอง

บนอุปกรณ์เคลื่อนที่ ควรเพิ่มความหนาของ outline-width เล็กน้อย (ประมาณ 3px) เพื่อให้ชัดเจนในจุดสัมผัส สำหรับโหมดมืด ให้ใช้ @media (prefers-color-scheme: dark) เพื่อกำหนดสีขอบที่สว่างกว่า

สไตล์โฟกัสมีผลต่อประสบการณ์ผู้ใช้อย่างมาก แต่การตกแต่งที่มากเกินไปอาจทำให้สับสน ควรสร้างสมดุลระหว่างฟังก์ชันและดีไซน์ พร้อมทั้งใช้สไตล์ที่สอดคล้องกันทั่วทั้งเว็บไซต์