JSFiddle - React, Tailwind, and code Playground
by Fuckomako
HTML
<form id="formElement">
One: <input type="text"><br>
Two: <input type="text">
</form>
CSS
.focused {
outline: solid 2px red;
}
JavaScript
var formElement = document.forms['formElement'].queryselectorAll('input');
formElement.addEventListener('focus', function(evt) {
var activeElement = formElement.querySelector('.focused');
if (activeElement) {
activeElement.classList.remove('focused');
}
evt.target.classList.add('focused');
});
formElement.onblur = function(evt) {
var activeElement = formElement.querySelector('.focused');
if (activeElement) {
activeElement.classList.remove('focused');
}
};