Html Color only (*) symbol in input placeholder field in form

Question

I have the following code:

Answer 1

One possible option could be using :valid pseudo-class for the required to make the absolutely positioned sibling element disappear — which is used as a placeholder under the input.

So, we can use ::before/::after pseudo-elements over the absolutely positioned element to change the color of our pseudo-placeholder.

.input-wrapper {
  display: inline-block;
  position: relative;
}

.input-wrapper input {
  background: transparent;
  border: 1px solid #999;
}

.input-wrapper input:valid + .placeholder {
  display: none;
}

.input-wrapper .placeholder {
  position: absolute;
  top: 1px;
  left: 2px;
  z-index: -1;
}

.input-wrapper .placeholder::before {
  content: attr(data-placeholder);
  color: #999;
}

.input-wrapper .placeholder::after {
  content: " *";
  color: tomato;
}

It's worth noting that :valid pseudo-class is supported in IE10+.