จัดสไตล์องค์ประกอบที่ได้รับโฟกัส (Focus) ด้วย CSS :focus

เพื่อเลือกองค์ประกอบที่ได้รับโฟกัส ให้ใช้ :focus selector ลองรันโค้ดด้านล่างเพื่อใช้งาน :focus selector:

ตัวอย่าง

<!DOCTYPE html>
<html>
  <head>
    <style>
      input:focus {
        background-color: green;
      }
    </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>