How to change the color of the ::placeholder of an <input> element back to its default color-CodePudding

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  type="text" placeholder="Search">

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

CodePudding user response：

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  type="text" placeholder="Search">

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