Skip to content
Permalink
Browse files

Adds different color for input placeholder on focus

  • Loading branch information...
davidmerfield committed Aug 15, 2019
1 parent 78eeec4 commit 2ac953374685846707e0ddbe787fba4d0c4fad2d
Showing with 29 additions and 4 deletions.
  1. +3 −0 app/brochure/routes/tools/inline-css.js
  2. +26 −4 app/brochure/views/css/form.css
@@ -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.
@@ -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
}

0 comments on commit 2ac9533

Please sign in to comment.
You can’t perform that action at this time.