CSS : ตัวเลือกโฟกัส
ตัวอย่าง
เลือกและจัดรูปแบบช่องป้อนข้อมูลเมื่อได้รับโฟกัส:
input:focus
{
background-color: yellow;
}
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
ตัว:focus
เลือกใช้เพื่อเลือกองค์ประกอบที่มีโฟกัส
เคล็ดลับ:อนุญาตให้ใช้ตัวเลือก :focus ในองค์ประกอบที่ยอมรับเหตุการณ์แป้นพิมพ์หรืออินพุตอื่นๆ ของผู้ใช้
รุ่น: | CSS2 |
---|
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนตัวเลือกอย่างสมบูรณ์
Selector | |||||
---|---|---|---|---|---|
:focus | 4.0 | 8.0 | 2.0 | 3.1 | 9.6 |
ไวยากรณ์ CSS
:focus {
css declarations;
}
ตัวอย่างเพิ่มเติม
ตัวอย่าง
เมื่อ <input type="text"> ได้รับการโฟกัส ให้ค่อยๆ เปลี่ยนความกว้างจาก 100px เป็น 250px:
input[type=text] {
width: 100px;
transition: ease-in-out, width .35s ease-in-out;
}
input[type=text]:focus {
width: 250px;
}
หน้าที่เกี่ยวข้อง
กวดวิชา CSS: คลาสหลอก CSS