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 the ::input-placeholder::after pseudo element to be shown when there is both a value in the text box as well as when there isn't a value in the text box (e.g. when an invalid value is present or when a value is required - should show the red "X" in the far right of the textbox via the ::input-placeholder::after pseudo-element).

Here's the fiddle: https://jsfiddle.net/edsinek/L8u7s25d/

Here's a snippet of the CSS I'm using to show the "X" for an invalid value:

.input-invalid input[type=text]::-webkit-input-placeholder::after {
  content: "\2716"; // "X"
  font-size: 18px;
  color: #ff0000;
  padding-right: 0;
  float: right;
}

Note: I'm only coding for Chrome at the moment, so forgive the webkit specific stuff.

Any ideas? Or is this something that is not possible and is UA dependent?

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;
 }

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-xs-12 input-container input-required">
      <label for="merchantAddress">Merchant Address</label>
      <input type="text" class="full-width" id="merchantAddress" placeholder="Merchant Address" />
    </div>
    <div class="col-xs-12 input-container input-valid">
      <label for="merchantCity">Merchant City</label>
      <input type="text" class="full-width" id="merchantCity" placeholder="Merchant City" value="" />
    </div>
    <div class="col-xs-12 input-container input-invalid">
      <label for="merchantState">Merchant State Code</label>
      <input type="text" class="full-width" id="merchantState" placeholder="Merchant State Code" value="" />
    </div>
    <div class="col-xs-12 input-container input-invalid input-required">
      <label for="merchantZip">Merchant Zip Code</label>
      <input type="text" class="full-width" id="merchantZip" placeholder="Merchant Zip Code" value="Bad Data" />
    </div>
  </div>
</div>

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;
}

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-xs-12 input-container input-required">
      <label for="merchantAddress">Merchant Address</label>
      <input type="text" class="full-width" id="merchantAddress" placeholder="Merchant Address" />
    </div>
    <div class="col-xs-12 input-container input-valid">
      <label for="merchantCity">Merchant City</label>
      <input type="text" class="full-width" id="merchantCity" placeholder="Merchant City" value="" />
    </div>
    <div class="col-xs-12 input-container input-invalid">
      <label for="merchantState">Merchant State Code</label>
      <input type="text" class="full-width" id="merchantState" placeholder="Merchant State Code" value="" />
    </div>
    <div class="col-xs-12 input-container input-invalid input-required">
      <label for="merchantZip">Merchant Zip Code</label>
      <input type="text" class="full-width" id="merchantZip" placeholder="Merchant Zip Code" value="Bad Data" />
    </div>
  </div>
</div>

Answer 2

Once the user starts typing in the input box, the browser is going to hide the placeholder, and with it, your X.

Unfortunately, you can't place it next to the input with :after, because that is not currently supported.

If you're attached to having the X next to the input, I would suggest placing a div next to input, and adding/showing the X when necessary.

Otherwise, I would move the X like you move the placeholder.

On focus, you set the placeholder to " " and give the label a color. This makes the label visible to the user and keeps a placeholder present, that you X can be :after. You could instead, set the placeholder to "", which would remove your X from the input box, but add an :after or :before to you label, and display the X there.

CSS to display X after label

.input-invalid.input-focused label:after,
.input-invalid.input-has-value label:after {
    content: "  \2716";
}