การใช้งาน CSS :focus Pseudo-class

ใช้ :focus เพื่อจัดสไตล์ Element ที่กำลังได้รับ Focus (เช่น Input ที่กำลังพิมพ์อยู่)

ตัวอย่าง

<!DOCTYPE html>
<html>
<head>
    <style>
        input:focus {
            background-color: orange;
        }
    </style>
</head>
<body>
    <form action="">
        Subject <input type="text" name="subject"><br>
        Student: <input type="text" name="student"><br>
        Age: <input type="number" name="age"><br>
        <input type="submit" value="Submit">
    </form>
</body>
</html>

ประโยชน์: เพิ่ม UX ให้ผู้ใช้เห็นชัดเจนว่ากำลังกรอกข้อมูล Input ไหนอยู่