Adds different color for input placeholder on focus

davidmerfield · Aug 15, 2019 · 2ac9533 · 2ac9533
1 parent 78eeec4
commit 2ac9533
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 4 deletions.
diff --git a/app/brochure/routes/tools/inline-css.js b/app/brochure/routes/tools/inline-css.js
@@ -57,6 +57,9 @@ module.exports = function (req, res, next) {
           // we need to skip font-face here...
           if (selector.indexOf("@font-face") > -1) return true;
 
+          // we need to skip font-face here...
+          if (selector.indexOf("placeholder") > -1) return true;
+
           // I use some complex selectors to style these elements
           // which do not match although they should when I run
           // the document query below. 

diff --git a/app/brochure/views/css/form.css b/app/brochure/views/css/form.css
@@ -120,26 +120,48 @@ textarea:focus {
 
 
 
-::-webkit-input-placeholder {
+input::-webkit-input-placeholder {
   /* Chrome/Opera/Safari */
   color: #a09d9c;
 }
 
-::-moz-placeholder {
+input::-moz-placeholder {
   /* Firefox 19+ */
   color: #a09d9c;
 }
 
-:-ms-input-placeholder {
+input:-ms-input-placeholder {
   /* IE 10+ */
   color: #a09d9c;
 }
 
-:-moz-placeholder {
+input:-moz-placeholder {
   /* Firefox 18- */
   color: #a09d9c;
 }
 
+
+input:focus::-webkit-input-placeholder {
+  /* Chrome/Opera/Safari */
+  color: #c5c4c4;
+}
+
+input:focus::-moz-placeholder {
+  /* Firefox 19+ */
+  color: #c5c4c4;
+}
+
+input:focus:-ms-input-placeholder {
+  /* IE 10+ */
+  color: #c5c4c4;
+}
+
+input:focus:-moz-placeholder {
+  /* Firefox 18- */
+  color: #c5c4c4;
+}
+
+
 .form flex {
   display: flex
 }