diff --git a/index.html b/index.html
index 28e73568f..304e396f7 100644
--- a/index.html
+++ b/index.html
@@ -17,6 +17,7 @@
       h3 { font: var(--font-sans); font-weight: 400; margin: 0; opacity: 0.5; text-transform: lowercase }
       p { line-height: 1.5rem; margin: 0.75rem 0 }
       input { color: var(--color); display: block; opacity: 0.85; padding: 0.5rem 0.75rem; width: 100% }
+      input:focus { outline: none }
 
       .box { background: rgba(255, 255, 255, 0.85); border-radius: 0.25rem; flex: 1 1; margin: 0.5rem; min-width: 15rem; max-width: 40rem; padding: 1rem 1.5rem; text-align: center; white-space: nowrap; width: 40rem; z-index: 2 }
       .buttons { display: none; margin: 2rem 0 1.5rem }
@@ -32,7 +33,7 @@
       .row { align-items: center; display: flex; justify-content: center }
 
       p.search { padding: 0 1rem }
-      input#search { display: none }
+      input#search { border: 1px solid #888; border-radius: 0.25rem; display: none }
 
       table { margin: 0 }
       td:not(.centered) { font: var(--font-mono); padding: 0.25rem 0.5rem; text-align: right }
@@ -94,7 +95,7 @@
       function draw () {
         hue = (hue + 1) % 360;
         document.body.style.background = `hsl(${hue}, 45%, 85%)`;
-        style.innerHTML = `a { color: hsl(${hue}, 45%, 45%) !important } .buttons a { border-color: hsl(${hue}, 45%, 45%) !important } .buttons .invert { background: hsl(${hue}, 45%, 45%) !important }`;
+        style.innerHTML = `a { color: hsl(${hue}, 45%, 45%) !important } .buttons a { border-color: hsl(${hue}, 45%, 45%) !important } .buttons .invert { background: hsl(${hue}, 45%, 45%) !important } input#search:focus { border-color: hsl(${hue}, 45%, 45%) }`;
 
         setTimeout(() => window.requestAnimationFrame(draw), 100);
       }