'Apply multiple font styles for a place holder

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.

htmlcss


Solution 1:[1]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 tacoshy

Related Questions