Apply red color for asterisk in a placeholder using ExtJS and CSS

Question

I need to set * in red color in a textfield's placeholder to indicate that the field is mandatory to be filled. I'm using ExtJS with CSS.

Answer 1

Well not possible with css or placeholder attribute...You will need a hack by creating a element for the placeholder text like span and style it look like placeholder...

Also you will need some jQuery to check that the input is empty or not to just show or hide the placeholder text

$(".input-control input").on("blur input", function() {
  if ($(this).val() != "") {
    $(this).next(".placeholder").hide();
  } else {
    $(this).next(".placeholder").show();
  }
})

.input-control {
  position: relative;
  font: 13px Verdana;
}

.input-control input {
  width: 200px;
  height: 30px;
  padding: 0 10px;
}

.input-control .placeholder {
  position: absolute;
  left: 12px;
  line-height: 30px;
  color: #bbb;
  top: 0;
  pointer-events: none;
}

.input-control .placeholder sup {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-control">
  <input type="text">
  <span class="placeholder">User Id<sup>*</sup></span>
</div>

Answer 2

Unfortunately, it's not possible to style different parts of placeholder text by default...

You can of course apply one style to the placeholder text though using the ::placeholder attribute:

Docs

However, there is a way to get support for most browsers that does what you require. There isn't a universal way of doing what you want easily so this might be a long shot...as long as you don't need support for older IE browsers, you should be okay with the following approach:

input::-webkit-input-placeholder:after {
    content: " *";
    color: red;
}

input:-moz-placeholder:after {
    content: " *";
    color: red;  
}

input:-ms-input-placeholder:after {  
    content: " *";
    color: red;  
}