Different colors in placeholder [duplicate]

问题

This question already has answers here:

Is it possible multiple text color in a single placeholder? (2 answers)

Closed 3 years ago.

I have an input field with placeholder something like this

<input type="text" name="Name" placeholder="Name*">

Now I want the "*" in the placeholder to be colored RED. Is there a way to do this?

回答1:

The appearance of the placeholder property of <input> elements is managed by the browser and it cannot be separated into two separate elements, which styling just the asterisk would require, nor can it be easily styled as such.

If you wanted to accomplish this, you would likely need to use something to explicitly override the element with a <div> that contained your <span>Name</span><span style='color:red'>*</span> content to overlay on your <input> element itself similar to the scenario mentioned in this related discussion :

.input-placeholder {
  position: relative;
}
.input-placeholder input {
  padding: 2px;
}
.input-placeholder input:valid + .placeholder {
  display: none;
}
.placeholder {
  position: absolute;
  pointer-events: none;
  top: 2px;
  bottom: 2px;
  left: 6px;
  margin: auto;
  color: #ccc;
}
.placeholder span {
  color: red;
}

    <div class="input-placeholder">
        <input type="text" required>
        <div class="placeholder">
            Name<span>*</span>
        </div>
</div>

来源：https://stackoverflow.com/questions/36867211/different-colors-in-placeholder