[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

@@ -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;