HTML Code

<!DOCTYPE html>



<html lang="en">



<head>



  <meta charset="utf-8">



  <title>focusable types</title>



  <style>



    body { font-family: sans-serif; padding: 16px; max-width: 24rem; }



    input, select, textarea, button { display: block; width: 100%; margin: 8px 0; padding: 8px; box-sizing: border-box; }



    .is-active { outline: 3px solid #2563eb; background: #eff6ff; }



  </style>



</head>



<body>



  <input type="text" placeholder="Name">



  <select><option>A</option><option>B</option></select>



  <textarea rows="2" placeholder="Notes"></textarea>



  <button type="button">Submit</button>



  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>



  <script>



    var focusable = "input:focus, textarea:focus, select:focus, button:focus";



    $(document).on("focusin", function() {



      $(focusable).addClass("is-active");



      $("input, textarea, select, button").not(":focus").removeClass("is-active");



    });



  </script>



</body>



</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

Multiple focusable types (Try It)