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

Question

我想知道是否有任何纯HTML / CSS方式来创建占位符，如所附的占位符，该占位符在占位符内结合了粗体和常规样式。 / p>

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>

---

Answer 2

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

我写了一个应该怎么做的笔：fake placeholder。

让我知道您有任何疑问。