From f757d7d1a50df70024ec0b83e2d58998ad1cc6c2 Mon Sep 17 00:00:00 2001
From: logmanoriginal <logmanoriginal@users.noreply.github.com>
Date: Thu, 10 Aug 2017 14:35:07 +0200
Subject: [PATCH] [style] Center search cursor and hide placeholder

The search bar doesn't feel right if the placeholder is centered,
while the text cursor is left-aligned. The cursor should appear
instead of the placeholder (at the same position).

Added styles to center the text cursor and hide the placeholder
when selecting the input field.

Tested in:
 - Firefox 54 & 55
 - Chromium 60 (compatible with Chrome 60)
 - Microsoft Edge (partially working!)

--- Microsoft Edge ---

Due to a bug in the Microsoft Edge browser, the text cursor is not
centered as long as the placeholder is defined (which it is always)

More information:
  https://stackoverflow.com/a/33224868

Official bug report:
  https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/4468563/

----------------------
---
 static/style.css | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/static/style.css b/static/style.css
index d477588..7f59c71 100644
--- a/static/style.css
+++ b/static/style.css
@@ -197,6 +197,31 @@ input[type="text"] {
 	font-size: 1.1em;
 	margin-left: 8px;
 	padding-left: 4px;
+	text-align: center;
+
+}
+
+input[type="text"]:focus::-webkit-input-placeholder {
+
+	opacity: 0;
+
+}
+
+input[type="text"]:focus::-moz-placeholder {
+
+	opacity: 0;
+
+}
+
+input[type="text"]:focus:-moz-placeholder {
+
+	opacity: 0;
+
+}
+
+input[type="text"]:focus:-ms-input-placeholder {
+
+	opacity: 0;
 
 }