GORAGOD.com

freelance, web developer, web designer, hosting, domain name

การทำ Highlight ให้กับ Label เมื่อ Input ได้รับ Focus ด้วย CSS

การทำ 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

  1. ปรับปรุงประสบการณ์ผู้ใช้ (UX) โดยช่วยให้ผู้ใช้ทราบว่าฟิลด์ใดกำลังใช้งานอยู่
  2. ใช้เพียง CSS ไม่จำเป็นต้องใช้ JavaScript ทำให้โค้ดดูเรียบง่ายและประหยัดทรัพยากร
  3. ทำให้ฟอร์มดูมีชีวิตชีวาและสื่อสารกับผู้ใช้ได้ดีขึ้น
0SHAREFacebookLINE it!
^