Apply multiple font styles for a place holder

Question

I want to display my input placeholder in different fonts bold and normal

<input placeholder="Type Here to search">

Type Here to search

as it is not possible to add spans between place holders i have to use css

::placeholder{
  content: 'Type Here';
  font-weight: bold;
}

This doesn't work is there any way to make it possible.

I cannot confirm the issue you are describing. The code works just fine for me: https://codepen.io/tacoshy/pen/qBpyKKp — tacoshy, Apr 12 '22 at 05:25
it makes whole text bold but i need "Type Here" in bold rest of it in normal font — venkat0107, Apr 12 '22 at 05:34
ah I see what you mean. Then maybe [the answer on this question](https://stackoverflow.com/questions/37699705/is-there-any-way-to-change-one-word-color-of-placeholder) will help you. It contains a solution for a custom placeholder that can also be applied to your case. — tacoshy, Apr 12 '22 at 05:40
@tacoshy that link gives interesting ways forward for changing colors but I can't see immediately how to do bold without some JS, which is hinted at in an answer but not detailed. Have I missed something? — A Haworth, Apr 12 '22 at 05:58
@AHaworth the 2nd example of the first answer shows a way for a custom placeholder using spans that are positioned absolute. That can be applied to change the font-style aswell not just the color. — tacoshy, Apr 12 '22 at 06:06
Type here to search is not a good placeholder, this should be a label. A placeholder is an example of what you enter in the text field. — cloned, Apr 12 '22 at 06:16

score 0 · Answer 1 · answered Apr 12 '22 at 06:14

This solution is based on the answer from @G-Cyrillus.

The placeholder cant be styled in a different way (the way you intend to). So you have to use a custom placehodler that is positioned absolute behind the input. The Placeholder will be visible aslong there is no content because of the last CSS decleration: input:invalid { background: none; }

label {
  display: inline-block;
}
label>span {
  position: absolute;
  padding-left: 3px;
}
label>span span {
 font-weight: bold;
}
input {
  position: relative;
  background: white;
}
input:invalid {
  background: none;
}

<label>
  <span><span>Type Here</span> to search</span>
  <input type="text" required />
</label>

Apply multiple font styles for a place holder

1 Answers1