<input class='red' type="text">
input {
outline: none;
}
.red {
border-color: red;
}
.green {
border-color: green;
outline: green;
}
const input = document.querySelector('input');
input.addEventListener('click', () => {
input.classList.toggle('green')
if (!input.classList.contains('green')) {
input.blur();
}
});
input.addEventListener('blur', () => {
input.classList.remove('green')
});