TPS/birzha
TPS
/
birzha
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix the placeholder hidden behind the counter in the form widget `number` (#5398) 

Fixes #5397
This commit is contained in:
Ayumi 2020-12-12 21:25:53 +00:00 committed by GitHub
parent 2d6b35b31e
commit 2108321d49
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 52 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
modules/system/assets/css/styles.css
View File

@ -63,6 +63,14 @@ input[type="checkbox"],
input[type="radio"] {box-sizing:border-box;padding:0}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {height:auto}
input[type="number"]:focus::-webkit-input-placeholder {margin-right:20px}
input[type="number"]:focus::-moz-placeholder {margin-right:20px}
input[type="number"]:focus:-ms-input-placeholder {margin-right:20px}
input[type="number"]:focus::placeholder {margin-right:20px}
input[type="number"]:hover::-webkit-input-placeholder {margin-right:20px}
input[type="number"]:hover::-moz-placeholder {margin-right:20px}
input[type="number"]:hover:-ms-input-placeholder {margin-right:20px}
input[type="number"]:hover::placeholder {margin-right:20px}
input[type="search"] {-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {-webkit-appearance:none}

36
modules/system/assets/ui/less/site.normalize.less
View File

@ -344,6 +344,42 @@ input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
//
// Prevents the placeholder getting displayed behind the incremental counter
// See github issue: https://github.com/octobercms/october/issues/5397
//
input[type="number"] {
&:focus {
&::-webkit-input-placeholder {
margin-right: 20px;
}
&::-moz-placeholder {
margin-right: 20px;
}
&:-ms-input-placeholder {
margin-right: 20px;
}
&::placeholder {
margin-right: 20px;
}
}
&:hover {
&::-webkit-input-placeholder {
margin-right: 20px;
}
&::-moz-placeholder {
margin-right: 20px;
}
&:-ms-input-placeholder {
margin-right: 20px;
}
&::placeholder {
margin-right: 20px;
}
}
}
//
// 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
// 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome

8
modules/system/assets/ui/storm.css
View File

@ -63,6 +63,14 @@ input[type="checkbox"],
input[type="radio"] {box-sizing:border-box;padding:0}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {height:auto}
input[type="number"]:focus::-webkit-input-placeholder {margin-right:20px}
input[type="number"]:focus::-moz-placeholder {margin-right:20px}
input[type="number"]:focus:-ms-input-placeholder {margin-right:20px}
input[type="number"]:focus::placeholder {margin-right:20px}
input[type="number"]:hover::-webkit-input-placeholder {margin-right:20px}
input[type="number"]:hover::-moz-placeholder {margin-right:20px}
input[type="number"]:hover:-ms-input-placeholder {margin-right:20px}
input[type="number"]:hover::placeholder {margin-right:20px}
input[type="search"] {-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {-webkit-appearance:none}