From f757d7d1a50df70024ec0b83e2d58998ad1cc6c2 Mon Sep 17 00:00:00 2001 From: logmanoriginal 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 d4775884..7f59c71e 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; }