您可以使用::placeholder选择器为占位符提供另一种颜色。但是，仅给一个字母提供另一种颜色是不可能的。

您可以使用和创建自定义输入元素，以实现所需的功能。HTMLCSS

/**
 * Just a basic idea of how you can achieve what you want using HTML and CSS only.
 */

.input {
  background-color: #fff;
  border-radius: 3px;
  position: relative;
  display: inline-block;
  border: 1px solid #888;
}

input {
  background-color: transparent;
  position: relative;
  padding: 5px;
  z-index: 1;
  border: none;
}

.placeholder {
  position: absolute;
  color: #ccc;
  left: 5px;
  top: 50%;
  transform: translateY(-50%)
}

/* Add the asterix when the input is required */
input:required + .placeholder::after {
  content: "*";
  color: red;
}

/* Hide the placeholder when the user wants to fill the input */
input:focus + .placeholder {
  visibility: hidden;
  opacity: 0;
}

<div class="input">
  <input type="text" name="name" required />
  <span class="placeholder">Your name</span>
</div>

placeholder=""从中删除，input然后将文本放置在span带有类名placeholder的自定义元素中。

当input被要求的CSS将追加一个星号。