I have implemented an overlay search box with the placeholder "Sök," and I want the text entered by the user to be removed and the placeholder to be reset if the user exits the search box by clicking the 'x' in the upper right corner. How can I achieve this functionality? Code:
body{
background: white;
font-family: 'Montserrat', sans-serif;
padding-bottom: -1px;
}
// CSS code here...
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="style.css" type="text/css">
// Head content here...
</head>
<body>
<header>
<div class="container">
<nav>
<ul>
<li><a href="#">Butiker</a></li>
<li><a href="#">Resturang & Café</a></li>
<li><a href="#">Utbyggnad</a></li>
<li><a href="#">Öppetider</a></li>
// HTML code here...
<i onclick="openSearch()" id="openBtn" class="fas fa-search"></i>
<script>
function openSearch() {
document.getElementById("myOverlay").style.display = "block";
}
// JavaScript code here...
function closeSearch() {
document.getElementById("myOverlay").style.display = "none";
}
</script>
<i class="fas fa-bars"></i>
</ul>
</nav>
</div>
</header>
// More HTML content...
<body>
</html>