How to style an individual word in Placeholder attribute

Question

Is there a way to style an individual word in a placeholder attribute? My marketing department is asking me to bold the first word in the placeholder. Below is the image marketing would like to achieve:

Any suggestions would be greatly appreciated.

Answer 1

This placeholder attribute is a property takes raw text as an input,...it can't be styled...only option here it so use some javascript with your input box..,

check this out might come in handy

function handle(){  
 if(document.getElementById("input").value==""){
   document.getElementById("tag").style='opacity:1';
 }
}

function handle2(){
  if(document.getElementById("input").value!=""){
   document.getElementById("tag").style.display="none"
 }
  else{
    document.getElementById("tag").style.display="inline-block";
  }
}
function handle3(){
  document.getElementById("tag").style.display="none";
  document.getElementById("input").focus();
}

document.getElementById("input").addEventListener('mouseout',handle,false)
document.getElementById("input").addEventListener('keyup',handle2,false)
document.getElementById("tag").addEventListener('click',handle3,false)

input_container{
  position:relative;
}
#input {
  position:relative;
  width:400px;
  height:20px;
  background:red;
  padding:0;
  margin:none;
}
#tag{
  display:inline-block;
 position:absolute;
  border-radius:4px;
  left:2%;
}

<div id="input_container">
  <input id="input">
  <div id="tag"><span style="font-weight:bold">Search</span> vendors,healthcare..</div>
</div>