不同颜色的占位符

Question

我有一个输入字段占位符像这样

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

现在我想要的“*”的占位符为红色。有没有办法做到这一点？

Answer 1

<input>元素的外观<input>元素是由浏览器管理的，它不能被分成两个单独的元素，它们只是星号所需的样式，也不能像这样容易地设计样式。

如果你想做到这一点，你可能会需要使用一些明确覆盖了<div>包含您的<span>Name</span><span style='color:red'>*</span>内容到您的<input>元素本身类似于上覆盖到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>