การทำ Highlight ให้กับ Label เมื่อ Input ได้รับ Focus ด้วย CSS
ในกระบวนการพัฒนาเว็บไซต์ การออกแบบฟอร์มเป็นสิ่งสำคัญที่ช่วยให้ผู้ใช้มีประสบการณ์ที่ดีในการกรอกข้อมูล การทำไฮไลต์ให้กับ Label เมื่อฟิลด์ Input ถูกโฟกัส เป็นอีกหนึ่งเทคนิคที่ช่วยให้ผู้ใช้ทราบว่าเขากำลังกรอกข้อมูลในฟิลด์ใดอยู่
ในบทความนี้ เราจะใช้ CSS pseudo-class :focus-within ซึ่งสามารถนำไปใช้ในการทำให้ Label มีการเปลี่ยนแปลงเมื่อ Input ที่อยู่ภายในได้รับการโฟกัส โดยไม่จำเป็นต้องใช้ JavaScript ทำให้โค้ดดูสะอาดและประหยัดทรัพยากร
วิธีการทำงานของ :focus-within
CSS pseudo-class :focus-within จะถูกเรียกใช้เมื่อองค์ประกอบใดๆ ภายในองค์ประกอบหลัก (ในที่นี้คือ Label) ได้รับโฟกัส ตัวอย่างนี้เป็นการเปลี่ยนสีพื้นหลังของ Label เมื่อผู้ใช้คลิกหรือใช้คีย์บอร์ดโฟกัสที่ Input
<label>
ชื่อผู้ใช้:
<input type="text" name="username">
</label>
CSS
label {
background-color: #f0f0f0;
padding: 5px;
display: inline-block;
}
label:focus-within {
background-color: #cce5ff;
border: 1px solid #66afe9;
}
คำอธิบายโค้ด
labelกำหนดสไตล์พื้นฐานของ Label ให้มีสีพื้นหลังเทาอ่อนlabel:focus-withinเมื่อ Input ภายใน Label ได้รับการโฟกัส สีพื้นหลังของ Label จะเปลี่ยนเป็นสีฟ้าอ่อน และเพิ่มเส้นขอบให้ดูชัดเจนยิ่งขึ้น
การใช้ :focus-within ในกรณีอื่นๆ
สามารถนำไปใช้ได้กับ Input ชนิดอื่นๆ เช่น Input แบบ Password หรือ Textarea ได้โดยง่าย
<label>
รหัสผ่าน:
<input type="password" name="password">
</label>
CSS
label {
background-color: #ffffff;
padding: 5px;
display: inline-block;
transition: background-color 0.3s;
}
label:focus-within {
background-color: #ffe6e6; /* เปลี่ยนสีพื้นหลังเป็นสีชมพูเมื่อ Input ถูกโฟกัส */
}
ประโยชน์ของการใช้ :focus-within
- ปรับปรุงประสบการณ์ผู้ใช้ (UX) โดยช่วยให้ผู้ใช้ทราบว่าฟิลด์ใดกำลังใช้งานอยู่
- ใช้เพียง CSS ไม่จำเป็นต้องใช้ JavaScript ทำให้โค้ดดูเรียบง่ายและประหยัดทรัพยากร
- ทำให้ฟอร์มดูมีชีวิตชีวาและสื่อสารกับผู้ใช้ได้ดีขึ้น