How To Set Color For Last Character In Placeholder

Is it possible to set color for last character in placeholder. I didn't find any related solutions.

Solution 1:

No JavaScript is needed here.

Here is a CSS-only way:

Set a background gradient, where only the last part is red. Then clip the background so it fill fit the text.

NOTE: That the percentage of the gradient is relative to the width of the input-field, not the text itself. So if you change the text, you also must change the percentage values in the gradient.

input {
  padding: 10px;
}
::-webkit-input-placeholder {
  background: -webkit-linear-gradient(left, #AAA 0%, #AAA 46%,red 46%, red 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<input type="text" class="f_name" name="fname" placeholder="First Name*">

Solution 2:

You can do it with some trick: The trick: address the placeholder text, add a "required" class to required inputs, and use the :after pseudo element to add an appropriately colored asterisk. This is only working for Webkit browsers.

Or using the spans, inside of the label to act as the value text.

HTML:

    <label><span class="title">Name<span class="symbol">*</span></span>
        <input type="text" />
    </label>

CSS:

label {
    position: relative;
}
label:hover span {
    display: none;
}
input[type="text"]:focus, input[type="text"]:active {
    z-index: 2;
}
label input[type="text"] {
    position: relative;
}
.title {
    color: gray;
    position: absolute;
    left: 5px;
    top: 1px;
    z-index: 1;
}
.symbol {
    color: red;
}

Some jquery to hide the span when input is filled. JQuery:

$('input[type="text"]').blur(function() {
    if( $(this).val().length >= 1) {
        $(this).toggleClass('active');
    }
    else {
        $(this).removeClass('active');
    }
});