A challenge I'm facing involves creating a form with an input field that changes its border color when clicked. My goal is for the border to return to its original color when clicking anywhere else on the page.
-HTML
<form action="">
<input onclick="onClick()" type="email" placeholder="Your E-mail Address">
<button>Get Started</button>
</form>
-CSS
form {
display: flex;
flex-direction: row;
border: 2px solid rgb(226, 226, 226);
border-radius: 30px;
padding: 8px 8px;
width: 78%;
transition: all 300ms ease;
}
.on-click form {
border: 2px solid #6415ff;
}
-JS
function onClick() {
document.body.classList += " on-click"
}
I attempted to create this feature but encountered difficulty applying it to the entire document.
function offClick() {
document.body.classList.remove('on-click')
}
Although I successfully changed the form's color upon clicking the input, I am struggling to figure out how to revert it back. Any suggestions or solutions would be greatly appreciated.