Возможно ли иметь несколько стилей текста для заполнителя элемента Input?

Question

Мне было интересно, есть ли какой-нибудь чистый HTML / CSS способ создания заполнителя, подобного прикрепленному, который сочетает в себе полужирный и обычные стили внутри заполнителя .

Answer 1

Я думаю, что единственный способ - это симулировать фальшивый заполнитель, добавив дополнительный элемент в родительский контейнер вашего input, затем используйте css, чтобы расположить его там, где должен быть заполнитель, и используйте javascript, чтобы сделать его "исчезающим", когдапользователь начинает писать на входе.

Я сделал ручку того, как это должно быть сделано: фальшивый заполнитель .

Дайте мне знать, какие у вас возникли сомнения.

Answer 2

Я думаю, что для этого не существует чистого решения 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>

---