Preview:
document.addEventListener('DOMContentLoaded', () => {

  const applyBorder = e => {
      const inputContainer = e.target.parentElement; 
      inputContainer.classList.toggle('outline');
  }

  const inputs = document.querySelectorAll('input'); 
  inputs.forEach(input => {
      input.addEventListener('focus', e => applyBorder(e)); 
      input.addEventListener('blur', e => applyBorder(e)); 
  });

}, false);
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter