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);
Preview:
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