diff --git a/overviewer_core/data/web_assets/overviewer.css b/overviewer_core/data/web_assets/overviewer.css
index d875cdb..9085557 100644
--- a/overviewer_core/data/web_assets/overviewer.css
+++ b/overviewer_core/data/web_assets/overviewer.css
@@ -114,6 +114,14 @@ body {
     background-colour: #fff;
 }
 
+#searchControl>input.inactive {
+    color: #ccc;
+}
+
+#searchControl>input.active {
+    color: #000;
+}
+
 div#searchDropDown {
     border: 1px solid #000;
     width: 17em;
diff --git a/overviewer_core/data/web_assets/overviewer.js b/overviewer_core/data/web_assets/overviewer.js
index 1d7fe60..12ca796 100644
--- a/overviewer_core/data/web_assets/overviewer.js
+++ b/overviewer_core/data/web_assets/overviewer.js
@@ -817,22 +817,25 @@ var overviewer = {
 
             var searchInput = document.createElement("input");
             searchInput.type = "text";
-			searchInput.value = "Sign Search"
-			searchInput.title = "Sign Search"
+			searchInput.value = "Sign Search";
+			searchInput.title = "Sign Search";
+            $(searchInput).addClass("inactive");
 			
 			/* Hey dawg, I heard you like functions.
 			 * So we defined a function inside your function.
-			 */
-			searchInput.onfocus = function() {
-					if (searchInput.value == "Sign Search") {
-							searchInput.value = "";
-					}
-			};
+             */
+            searchInput.onfocus = function() {
+                if (searchInput.value == "Sign Search") {
+                    searchInput.value = "";
+                    $(searchInput).removeClass("inactive").addClass("active");
+                }
+            };
 			searchInput.onblur = function() {
-				if (searchInput.value == "") {
-					searchInput.value = "Sign Search";
-				}
-			};
+                if (searchInput.value == "") {
+                    searchInput.value = "Sign Search";
+                    $(searchInput).removeClass("active").addClass("inactive");
+                }
+            };
 
             searchControl.appendChild(searchInput);