CSS pseudo-element input-placeholder::after to show with or without value in text box

Question

I\'m trying to get some UI flagging on form elements for the user after validation to work using the placeholder pseudo elements (starting with text boxes). What I want is t

Answer 1

Original Answer: (doesn't work in Chrome v47 and above⁺)

When you start typing inside a text box, ::-webkit-input-placeholder element's visibility gets set to hidden. To display its ::after element even when the input box has a value, we need to override it and set the visibility to visible.

.input-invalid input[type=text]::-webkit-input-placeholder::after {
  visibility: visible;
}

    var addFormFocusEventHandler = function() {
      var placeholder;
      // using the document syntax in case input & container added to DOM dynamically
      $(document).on("focus", "div.input-container :input", function() {
        $(this).closest("div.input-container").addClass("input-focused");
        placeholder = $(this).prop("placeholder");
        $(this).prop("placeholder", " ");
      }).on("blur", "div.input-container :input", function() {
        $(this).closest("div.input-container").removeClass("input-focused");
        $(this).prop("placeholder", placeholder);
        placeholder = "";
      });
    };
    var addFormValueEventHandler = function() {
      // using the document syntax in case input & container added to DOM dynamically
      $(document).on("blur", "div.input-container :input", function() {
        if ($(this).val()) {
          $(this).closest("div.input-container").addClass("input-has-value");
        } else {
          $(this).closest("div.input-container").removeClass("input-has-value");
        }
      });
    };

    var initialize = function() {
      addFormFocusEventHandler();
      addFormValueEventHandler();
    };

    initialize();

 label {
   color: transparent;
   display: block;
 }
 input[type=text] {
   display: block;
   border-width: 0 0 1px !important;
   border-radius: 0;
   border-style: solid;
   border-color: rgba(0, 0, 0, 0.12);
 }
 .input-focused:not(.input-invalid) label {
   color: rgb(16, 108, 200);
 }
 .input-focused:not(.input-invalid) input[type=text] {
   border-color: rgb(16, 108, 200);
 }
 .input-has-value:not(.input-invalid):not(.input-focused) label {
   color: #595959;
 }
 .input-invalid.input-focused label,
 .input-invalid.input-has-value label {
   color: #ff0000;
 }
 .input-invalid input[type=text] {
   border-color: #ff0000;
 }
 .input-invalid input[type=text]::-webkit-input-placeholder {
   color: #ff0000;
 }
 .input-invalid input[type=text]::-webkit-input-placeholder::after {
   content: "\2716";
   /* "X" */
   font-size: 18px;
   color: #ff0000;
   padding-right: 0;
   float: right;
 }
 .input-valid input[type=text]::-webkit-input-placeholder::after {
   content: "\2714";
   /* checkmark */
   font-size: 18px;
   color: #438D5B;
   padding-right: 0;
   float: right;
 }
 .input-invalid input[type=text]::-webkit-input-placeholder::after {
   visibility: visible;
 }

  

    

      Merchant Address
      
    
    

      Merchant City
      
    
    

      Merchant State Code
      
    
    

      Merchant Zip Code
      
    
  

Note: I would not recommend using the placeholder pseudo-element or its child pseudo-element for this purpose but then if you still wish to proceed the above answer would work for you.

---

⁺Why does the above not work in Chrome v47 and above?

As pointed out by Pete Talks Web in comments, the above doesn't seem to work in Chrome v47 while it works in Chrome v43. This seems to be because of a key difference in how the placeholder pseudo-element (::-webkit-input-placeholder) is hidden once text has been typed. In v43, the visibility property is used to hide it whereas in v47, it seems like display:none is used. I don't have access to v47 but assume this to be the behavior based on what is observed in Opera which also uses WebKit. An !important is also added to it. This and the fact that the property is added as inline style means it is impossible to override using CSS alone. UA's shadow DOM elements cannot be accessed through JS also and hence there is no way to make the pseudo-element visible once text is typed in.

What happens in the very latest Chrome?

In Chrome v50.0.2638.0 dev-m, the fiddle provided in question itself doesn't work. That is, neither the cross nor the tick marks get displayed. It seems like WebKit has started suppressing the addition of pseudo-elements to the ::-webkit-input-placeholder . This is one thing that I always anticipated happening and it is exactly why I added that note in my answer.

---

Alternate Solution:

An alternate solution would be to add the pseudo-element to wrapper div and position it as apt. In the below snippet, I have changed input and the pseudo-element to inline-block, positioned the pseudo-element relatively and added a negative margin-left to it. These make it appear near the right edge of the input box. (I had also added width: 100% to the label to make it span the whole line.)

var addFormFocusEventHandler = function() {
  var placeholder;
  // using the document syntax in case input & container added to DOM dynamically
  $(document).on("focus", "div.input-container :input", function() {
    $(this).closest("div.input-container").addClass("input-focused");
    placeholder = $(this).prop("placeholder");
    $(this).prop("placeholder", " ");
  }).on("blur", "div.input-container :input", function() {
    $(this).closest("div.input-container").removeClass("input-focused");
    $(this).prop("placeholder", placeholder);
    placeholder = "";
  });
};
var addFormValueEventHandler = function() {
  // using the document syntax in case input & container added to DOM dynamically
  $(document).on("blur", "div.input-container :input", function() {
    if ($(this).val()) {
      $(this).closest("div.input-container").addClass("input-has-value");
    } else {
      $(this).closest("div.input-container").removeClass("input-has-value");
    }
  });
};

var initialize = function() {
  addFormFocusEventHandler();
  addFormValueEventHandler();
};

initialize();

label {
  color: transparent;
  display: block;
  width: 100%; /* add this */
}
input[type=text] {
  display: inline-block; /* modify this */
  border-width: 0 0 1px !important;
  border-radius: 0;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.12);
}
.input-focused:not(.input-invalid) label {
  color: rgb(16, 108, 200);
}
.input-focused:not(.input-invalid) input[type=text] {
  border-color: rgb(16, 108, 200);
}
.input-has-value:not(.input-invalid):not(.input-focused) label {
  color: #595959;
}
.input-invalid.input-focused label,
.input-invalid.input-has-value label {
  color: #ff0000;
}
.input-invalid input[type=text] {
  border-color: #ff0000;
}
.input-invalid input[type=text]::-webkit-input-placeholder {
  color: #ff0000;
}
.input-invalid::after { /* change the selector */
  position: relative; /* add this */
  display: inline-block; /* add this */
  margin-left: -1em; /* add this */
  content: "\2716";  /* "X" */
  font-size: 18px;
  color: #ff0000;
}
.input-valid::after {/* change the seletor */
  position: relative; /* add this */
  display: inline-block; /* add this */
  margin-left: -1em; /* add this */
  content: "\2714";  /* checkmark */
  font-size: 18px;
  color: #438D5B;
}

  

    

      Merchant Address
      
    
    

      Merchant City
      
    
    

      Merchant State Code
      
    
    

      Merchant Zip Code