Untitled

<!DOCTYPE html>
<html>
<head>
    <title>Interactive Textbox Color</title>
    <style>
        .focused {
            background-color: lightblue ;
            color: white;
        }
        .blurred {
            background-color: white;
            color: black;
        }
  	 #textbox:hover {
            background-color: lightblue;         
	    color: darkblue;        
	 }
    </style>
 <script>
        function changeColor(isFocused) {
            var textbox = document.getElementById("textbox");
            if (isFocused) {
                textbox.classList.add("focused");
                textbox.classList.remove("blurred");
            } else {
                textbox.classList.add("blurred");
                textbox.classList.remove("focused");
            }
        }
    </script>
</head>
<body>
    <input type="text" id="textbox" onfocus="changeColor(true)" onblur="changeColor(false)">
</body>
</html>
Editor is loading...