HTML5 in Placeholder jQuery

Question

I want to have a bold tag in my input placeholder like the following:

---

|--------------------|
|  BOLD normal       |
|--------------------|

I found answers on Google but they're not useful. Like overlaying a div over the input with position:relative .

Is there a way to have HTML in a placeholder tag without having to need HTML? Such as a useful jQuery plugin? It doesn't need to be supported on any browsers other than Chrome.

Answer 1

You can't have a bold "tag" inside the placeholder. However you can style it in a way to make some of the text bold. You are however limited to either styling the beginning or the end of the text.

 input { padding: 5px 10px; width: 500px; } input::-webkit-input-placeholder { font-weight: bold; color: red; } input::-webkit-input-placeholder:after { content: " Not so bold here"; font-weight: normal; color: blue; } 

 <input type="text" placeholder="I'm a pretty bold placeholder text.."> 

http://codepen.io/anon/pen/WryaPM

Answer 2

尝试这个...

 div.input { border:1px solid #aaa; width:300px; } 

 <div contenteditable="true" class="input"><strong>My name is:</strong> devat karetha</div>