CSS Select :placeholder within an Id

Question

I am styling the search bar on a Wordpress site and I need to modify the placeholder text for that bar only. I do not have access to the HTML.

Here's the code I have so far:

#searchform-5aea17efae9386\.31889305 { border-radius:25px; }

I need the Placeholder text to be color:#d2d4d3 - everything I've tried has changed the color of every instance of placeholder text instead of targeting the specific search bar.

Here is the HTML

<input itemprop="query-input" type="search" name="s" id="searchform-5aea17efae9386.31889305" placeholder="Search this website …">

Any help would be great, thanks.

Answer 1

You need to use the ::placeholder puesdo selector like pointed out in the comments. To target just that input just use a selector in front of the ::placeholder style to target just that input.

You could use a selector that targets inputs whose id starts with (^=) "searchform", or just use that id if those numbers don't change.

input[id^="searchform"]

input[id^="searchform"]::-webkit-input-placeholder { 
  color: red;
}
input[id^="searchform"]::-moz-placeholder { 
  color: red;
}
input[id^="searchform"]:-ms-input-placeholder { 
  color: red;
}
input[id^="searchform"]:-moz-placeholder { 
  color: red;
}

<input itemprop="query-input" type="search" name="s" id="searchform-5aea17efae9386.31889305" placeholder="Search this website …">

<br /><br />

<input itemprop="query-input" type="search" name="s" placeholder="Search this website …">