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?

score 9 · Accepted Answer · edited May 23 '17 at 10:32

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>

Were you able to get this to work in a browser? It didn't work in my Chrome version 47.0.2526.106 — Jacob Petersen, Feb 05 '16 at 07:20
@PeteTalksWeb Yes, it does work for me on Chrome. I am using a slightly older version though. Let me try to get my hands on some machine with a newer version. — Harry, Feb 05 '16 at 07:21
@PeteTalksWeb: I just checked in Chrome v 50.0.2633.3 dev-m and OP's original fiddle itself doesn't work there. It seems like they've suppressed addition of `::after` element to the `::webkit-input-placeholder`. It is in anticipation of things like this that I added that note. Is it the same as what you see on your Chrome v47? — Harry, Feb 05 '16 at 07:34
the ::after on the ::webkit-input-placeholder still works for me, but there appears to be no way to style it after the placeholder is removed. I tried modifying visibility (like your solution), color, display, and opacity, but couldn't get it to show. Good to know that Chrome is moving in the direction of removing ::webkit-input-placeholder::after. Thanks for investigating. — Jacob Petersen, Feb 05 '16 at 07:39
@Harry, lovin' the alternate solution. You mention that WebKit is suppressing the addition of the ::-webkit-input-placeholder and it's something that you anticipated. Can you elaborate on that? — Ed Sinek, Feb 05 '16 at 15:41
@Ed.S.: In Chrome v50, the `::-webkit-input-placeholder::after` element is not producing any output at all. Even while inspecting the element with *shadow DOM display* option enabled, it doesn't show that element. So, it looks like from that version of Chrome, we will not be allowed to attach a pseudo-element to the `::-webkit-input-placeholder` element. Shadow DOM elements that are used by the UA (like this one) are generally not supposed to be modified in any way by users and so I expected that at some point of time, they'll disallow the option of attaching a pseudo to it. — Harry, Feb 05 '16 at 15:44
Good answer. It looks like Chrome is preventing us from styling the active placeholder on purpose. I think this is probably an "accessibility decision" on Chrome's part to protect us from ourselves. Now that Chrome has the market share, they're repeating all the same mistakes IE did back when it was deciding what the web would look like. — corysimmons, Feb 26 '16 at 01:28

score 2 · Answer 2 · answered Feb 05 '16 at 07:14

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

@Harry The extra spaces are to add padding between the label and the icon. Thought it looked better that way :) — Jacob Petersen, Feb 05 '16 at 16:40
@Harry It's cool. I probably should have added css padding instead, for a more proper solution — Jacob Petersen, Feb 05 '16 at 17:20

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

2 Answers2

Linked

Related