pseudo-class :focus ของ CSS

การระบุและการใช้งาน

CSS :focus pseudo-class ใช้เลือกและกำหนดรูปแบบขององค์ประกอบที่ได้รับความสนใจ

ตัวอย่าง

ตัวอย่าง 1

เลือกและกำหนดรูปแบบของช่องบันทึกข้อมูลที่ได้รับความสนใจ:

input:focus {
  background-color: yellow;
}

ทดลองด้วยตัวเอง

ตัวอย่าง 2

เมื่อช่องบันทึกข้อมูลได้รับความสนใจ เปลี่ยนสีพื้นหลังและความกว้าง:

input:focus {
  background-color: yellow;
  width: 250px;
}

ทดลองด้วยตัวเอง

การใช้งานภาษา CSS

:focus {
  declarations css;
}

รายละเอียดเทคนิค

เวอร์ชั่น: CSS2

การสนับสนุนโปรแกรมน่าเทเลิร์น

ตัวเลขในตารางนี้บอกว่าเวอร์ชั่นบราวเซอร์แรกที่สนับสนุน pseudo-class ให้เต็มทั้งหมด

Chrome Edge Firefox Safari Opera
4.0 8.0 2.0 3.1 9.6

หน้าที่เกี่ยวข้อง

ความรู้:CSS มิติลอย