diff options
| author |  logmanoriginal <logmanoriginal@users.noreply.github.com>
| 2019-06-08 15:50:13 +0200 |
|---|---|---|
| committer | logmanoriginal <logmanoriginal@users.noreply.github.com>
| 2019-06-08 15:50:16 +0200 |
| commit | f28cbecc025fdef3e3e724b2dbb576886d5209fb (patch) | |
| tree | d86f4d0a9d43824acccfcca19b2bc513b87dff36 | |
| parent | 84450371b5491757bcf6c3672b6b165aa6d08285 (diff) | |
| download | rss-bridge-f28cbecc025fdef3e3e724b2dbb576886d5209fb.tar.gz rss-bridge-f28cbecc025fdef3e3e724b2dbb576886d5209fb.tar.zst rss-bridge-f28cbecc025fdef3e3e724b2dbb576886d5209fb.zip | |
[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.
| -rw-r--r-- | static/style.css | 13 |
1 files 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; |