输入元素的占位符是否可以有多种文本样式？答案

【问题标题】：Is it possible to have multiple text styling for an Input element's placeholder?输入元素的占位符是否可以有多种文本样式？
【发布时间】：2018-10-26 21:53:27
【问题描述】：

我想知道是否有任何纯 HTML/CSS 方法来创建像附件一样的占位符，它在 占位符 中结合了 bold 和常规样式。

【问题讨论】：

How can I style individual parts of an input placeholder?的可能重复

标签： html css sass

【解决方案1】：

我认为没有纯 CSS 解决方案（也许结合 ::first-letter 和 ::placeholder？）但这里是 PressTigers 的解决方案：

$(document).ready(function(){
	$('.input-required input').on('focus',function(){
		if(!$(this).parent('.input-required').find('label').hasClass('hide')){
                        $(this).parent('.input-required').find('label').addClass('hide');
                        }
	});
            $('.input-required input').on('blur',function(){
		if($(this).val() == '' && $(this).parent('.input-required').find('label').hasClass('hide')){
                        $(this).parent('.input-required').find('label').removeClass('hide');
                    }
             });
});

.input-required {
  position: relative;
}
.input-required > label {
  position: absolute;
  left: 10px;
  top: 50%;
  margin: -0.6em 0 0;
  font-weight: 300;
}
.input-required .hide {
  display: none;
}
.first-letter {
  color: #6b6b6b;
}
.second-letter {
  color: red;
}
.third-letter {
  color: black;
}
.fourth-letter {
  color: blue;
}
.fifth-letter {
  color: brown;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-required">
	<label>
            	<span class="first-letter">Password</span>  
                        <span class="second-letter">*</span>
            </label>
            <input type="password" id="password" name="password" class="input-text">
 </div>
<div class="input-required">
	<label>
            	<span class="first-letter">H</span>  
                        <span class="second-letter">e</span>
                        <span class="third-letter">l</span>
                        <span class="fourth-letter">l</span>
                        <span class="fifth-letter">o</span>
             </label>
	<input type="text" id="hello" name="Hello" class="input-text">
</div>

【讨论】：

谢谢。但我正在寻找可能涉及占位符伪元素的东西，或者我现在认为可能不可能的东西！

【解决方案2】：

我认为唯一的方法是模拟一个假占位符，在 input 的父容器内添加一个额外的元素，然后使用 css 将其定位在占位符应该在的位置，并使用 javascript 使其“消失”用户开始在输入中书写。

我做了一支笔，说明它应该如何制作：fake placeholder。

如果您有任何疑问，请告诉我。

【讨论】：