html - Input 元素的占位符是否可以有多个文本样式？

Question

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

Answer 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>

---