diff --git a/modules/system/assets/css/styles.css b/modules/system/assets/css/styles.css
index 11318749e..9363978f4 100644
--- a/modules/system/assets/css/styles.css
+++ b/modules/system/assets/css/styles.css
@@ -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}
diff --git a/modules/system/assets/ui/less/site.normalize.less b/modules/system/assets/ui/less/site.normalize.less
index d40b1a822..bc1ec6d7f 100644
--- a/modules/system/assets/ui/less/site.normalize.less
+++ b/modules/system/assets/ui/less/site.normalize.less
@@ -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
diff --git a/modules/system/assets/ui/storm.css b/modules/system/assets/ui/storm.css
index 0768eb8b2..11dd818d5 100644
--- a/modules/system/assets/ui/storm.css
+++ b/modules/system/assets/ui/storm.css
@@ -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}