[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:
4468563
/
----------------------
This commit is contained in:
parent
4fb1366aaf
commit
f757d7d1a5
1 changed files with 25 additions and 0 deletions
|
@ -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;
|
||||
|
||||
}
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue