1

Hello people i want to change color only of font awesome icon on placeholder but when i change color of placeholder also it change color of text how to customize color only icon ? do anyone know how to ?

        <input class="form-control far fa-user" type="text" placeholder="&#xf007 Your Username">
Albenis Kërqeli
  • 130
  • 8

2 Answers2

1

You can consider a trick using background coloration combined with :placeholder-shown

input {
  font-size:40px;
  margin:5px;
}
input:placeholder-shown {
  color:transparent;
  background:linear-gradient(to right, red 1.2em,#000 0); /* you may need to adjust the 1.2em based on your case */
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-fill-color: transparent;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<input class="form-control far" type="text" placeholder="&#xf007 Your Username">
<br>
<input class="form-control far" type="text" placeholder="&#xf007 Your Username" style="font-size:20px;">
<br>
<input class="form-control far" type="text" placeholder="&#xf007 Your Username" style="font-size:10px;">
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
0

You cannot set separate text colors for separate parts of the same placeholder attribute. You may want to consider using a separate <i> or svg version of the font awesome icon and include it as a separate asset, example: Put icon inside input element in a form

quetzaluz
  • 1,071
  • 12
  • 17