home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> CSS

CSS :focus Pseudo-Class: คู่มือการใช้งาน

CSS :focus pseudo-class เลือก element ใน focus state เกิดขึ้นเมื่อคลิก element หรือ select ด้วย tab key :focus วางหลังชื่อ element ที่ต้องการ select

อาจต้องการ apply style ให้ element เฉพาะตอนที่มี focus บน web page เช่น ใส่ border ให้ form field เมื่อ user คลิก

นี่คือที่มาของ CSS :focus pseudo-class :focus ใช้ style เมื่อ user คลิก element หรือ select ด้วย tab keyboard button

บทเรียนนี้อธิบายพื้นฐาน CSS :focus pseudo-class และการใช้งาน พร้อมตัวอย่าง จบแล้วคุณจะเป็น expert ในการใช้ :focus สำหรับ elements ใน focus

CSS Pseudo-Classes

Pseudo-class คือ keyword เพิ่มใน CSS selector ระบุ state ที่ element ควรอยู่เพื่อให้ style ใช้ได้ เพิ่มหลัง selector

Pseudo-classes ให้ตั้ง rules สำหรับ elements ใน special state เช่น focus สำหรับ tutorial นี้ focus ที่ :focus pseudo-class

CSS :focus Pseudo-Class

CSS :focus pseudo-class ใช้ styles กับ element เมื่อ element ได้รับ focus บน web page ถ้า user คลิก หรือ select ด้วย tab key จะกลายเป็น focused element

Syntax ของ :focus pseudo class:

textarea:focus { border: 1px solid blue; }

โค้ดตั้ง solid blue border กว้าง 1 pixel รอบ HTML