URL87 URL87 - 9 days ago 8
CSS Question

Change input placeholder color from the Chrome Developer Tools style

I did an

input
with blue font color and red
placeholder
,

now I want to check other
placeholder
colors by the Chrome Developer Tools (F12) , as same as I can do for the font color -

enter image description here

how could I get the same Chrome Developer Tools color picker for the
placeholder
as well ?



input[type="text"] {
color: blue;
}

::-webkit-input-placeholder {
color: red;
}

<input type="text" placeholder="Type Here">




Answer

If I understood you well, you want to have color picker in Chrome Developer Tool, the same like for font. To do it, follow steps:

  1. Press F12
  2. Click + icon in the top right corner of the right sidebar: enter image description here

  3. Add new rule. Paste your selector and your properties: enter image description here

Now you can modify your rule in the same way as for font color. I hope this is what you want to achieve