CODEWITHSUNDEEP
jquerycsshtmlplaceholder
Mia
Mia

Reputation: 957

HTML5 in Placeholder jQuery

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.

Upvotes: 0

Views: 100

Answers (2)

dekts
dekts

Reputation: 820

Try this...

div.input { border:1px solid #aaa; width:300px; }
<div contenteditable="true" class="input"><strong>My name is:</strong> devat karetha</div>

Upvotes: 0

Pierre
Pierre

Reputation: 19071

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

Upvotes: 3

Related Questions