LesLibres.org/Rss-Bridge
2
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

[style] Fix placeholder should be hidden on focus

Browse source 
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.
This commit is contained in:
logmanoriginal 2019-06-08 15:50:13 +02:00
parent 84450371b5
commit f28cbecc02
1 changed files with 6 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
static/style.css
View file

@ -84,6 +84,12 @@ input[type="number"]:focus {
border-color: #888; 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 { .searchbar {
width: 40%; width: 40%;
margin: 40px auto 100px; margin: 40px auto 100px;
@ -101,13 +107,6 @@ input[type="number"]:focus {
text-align: center; 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 { .searchbar > h3 {
font-size: 200%; font-size: 200%;
font-weight: bold; font-weight: bold;