From f28cbecc025fdef3e3e724b2dbb576886d5209fb Mon Sep 17 00:00:00 2001
From: logmanoriginal <logmanoriginal@users.noreply.github.com>
Date: Sat, 8 Jun 2019 15:50:13 +0200
Subject: [PATCH] [style] Fix placeholder should be hidden on focus

The placeholder is currently visible on key focus and only hidden
once a user starts typing. This can be confusing and doesn't look
good.

As it turns out, ::placeholder is an official selector:
https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder

For some reason, listing placeholder selectors with "," doesn't
work on some browsers (tested in FF 60 ESR). Making each of the
selectors explicit works, however.
---
 static/style.css | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/static/style.css b/static/style.css
index fa70f2d9..4abf9f96 100644
--- a/static/style.css
+++ b/static/style.css
@@ -84,6 +84,12 @@ input[type="number"]:focus {
 	border-color: #888;
 }
 
+input:focus::-webkit-input-placeholder { opacity: 0; }
+input:focus::-moz-placeholder { opacity: 0; }
+input:focus::placeholder { opacity: 0; }
+input:focus:-moz-placeholder { opacity: 0; }
+input:focus:-ms-input-placeholder { opacity: 0; }
+
 .searchbar {
 	width: 40%;
 	margin: 40px auto 100px;
@@ -101,13 +107,6 @@ input[type="number"]:focus {
 	text-align: center;
 }
 
-.searchbar input[type="text"]:focus::-webkit-input-placeholder,
-.searchbar input[type="text"]:focus::-moz-placeholder,
-.searchbar input[type="text"]:focus:-moz-placeholder,
-.searchbar input[type="text"]:focus:-ms-input-placeholder {
-	opacity: 0;
-}
-
 .searchbar > h3 {
 	font-size: 200%;
 	font-weight: bold;