<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')
});