As you can see in the second input field which has no CSS applied to it, the default placeholder color (atleast for me on chrome) is grey. However, when I change the color back to "initial" (which should be its default color) on the first input field, it becomes black. I have also tried to use "unset", but that didnt work either. How can I make the color return to its default color???

.inp1::placeholder {
  color: red;
}
.inp1:hover::placeholder,
.inp1:focus::placeholder {
  color: initial;
}

<input class="inp1" type="text" placeholder="Search">

<input class="inp2" type="text" placeholder="Search">

>Solution :

This seems to be an issue with Chrome, Firefox behaves properly with keyword initial, you can use keyword revert

.inp1::placeholder {
  color: red;
}
.inp1:hover::placeholder,
.inp1:focus::placeholder {
  color: revert;
}

<input class="inp1" type="text" placeholder="Search">

<input class="inp2" type="text" placeholder="Search">