0

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.

stark
  • 2,246
  • 2
  • 23
  • 35
Mia
  • 817
  • 2
  • 8
  • 13
  • 2
    This isn't possible; you *can* [style placeholder-text](http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css) but all of the placeholder will have the same style. If you want to have different words/parts of the placeholder styled differently then you will need to use relative-positioning of other elements over the top of the ``. – David Thomas Jan 31 '16 at 17:10
  • 1
    Possible duplicate of [Is there a way to style part of an input field's value?](http://stackoverflow.com/questions/3121683/is-there-a-way-to-style-part-of-an-input-fields-value) – AMACB Jan 31 '16 at 17:11
  • Using css you can set the input font weight to be bold and when the input is focused, set the font weight to normal. No Javascript needed. – bradcush Jan 31 '16 at 17:22
  • 1
    Why do people downvote questions when they don't know the answer ? The question is well formed and the OP has proven he/she has tried something before asking this question. – Pierre Jan 31 '16 at 17:52

2 Answers2

3

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

Pierre
  • 18,643
  • 4
  • 41
  • 62
  • Which plateform are you on ? Works for me anyway on a Mac, http://cl.ly/123M1B3u1w3z – Pierre Jan 31 '16 at 17:57
  • Mmm.. very strange! Not working on Chrome 49 for Win, but yes on Chrome 47 for Android – squaleLis Jan 31 '16 at 17:59
  • Thank you so much for your answer! This helped a lot! – Mia Jan 31 '16 at 18:50
  • @DavidThomas Getting the text value from the attributes looks impossible. It seems that the browser is trying to look for an attribute (data-beforetext) on the placeholder attr.. Did I miss something ? http://codepen.io/anon/pen/GoGzwN – Pierre Feb 01 '16 at 00:13
0

Try this...

div.input { border:1px solid #aaa; width:300px; }
<div contenteditable="true" class="input"><strong>My name is:</strong> devat karetha</div>
dekts
  • 744
  • 4
  • 19
  • or do like that,`input::-webkit-input-placeholder { color: red; font-weight: bold; } input:-moz-placeholder { color: red; font-weight: bold; } input:-ms-input-placeholder { color: red; font-weight: bold; }` – dekts Feb 03 '16 at 09:52