0

I was wondering if there is any pure HTML/CSS way to create a placeholder like the attached one, which combines both bold and regular stylings inside the placeholder.

enter image description here

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Mohammad bd
  • 13
  • 4
  • Possible duplicate of [How can I style individual parts of an input placeholder?](https://stackoverflow.com/questions/22655493/how-can-i-style-individual-parts-of-an-input-placeholder) – ReSedano Oct 27 '18 at 01:38

2 Answers2

0

I think there is no pure CSS solution for that (maybe combine ::first-letter and ::placeholder?) but here is the Solution of 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>
Maarti
  • 3,600
  • 4
  • 17
  • 34
  • Thanks. But I was looking for something which possibly could involved the placeholder pseudo element or something like that which I am thinking now might be impossible! – Mohammad bd Oct 26 '18 at 22:28
0

I think the only way is to simulate a fake placeholder, adding an extra element inside a parent container of your input, then use css to position it where the placeholder should be and use javascript to make it "dissapear" when the user starts writing in the input.

I made a pen of how it should be made: fake placeholder.

Let me know any doubts you get.

Adilson Sandoval
  • 11
  • 1
  • 3