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.

Possible duplicate of: https://stackoverflow.com/questions/2610497/change-an-html5-inputs-placeholder-color-with-css — dukedevil294, May 02 '18 at 20:31
Possible duplicate of [Change an HTML5 input's placeholder color with CSS](https://stackoverflow.com/questions/2610497/change-an-html5-inputs-placeholder-color-with-css) — dukedevil294, May 02 '18 at 20:32

score 2 · Answer 1 · answered May 02 '18 at 20:36

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 …">

CSS Select :placeholder within an Id

1 Answers1