Change colour of search bar placeholder text

rarch47 · March 2015

I am trying to change the default colour of the placeholder text in the popup search bar as I have modified the colour and it's lost heaps of contrast. I have used the following CSS but it doesn't seem to work form#searchform input-placeholder { color:white!important; }

Is there something I am missing here?

thanks

Albert · March 2015

Placeholder text color inside search can be changed within below css:

#Top_bar .search_wrapper input[type="text"] { color: #000 !important; }

rarch47 · March 2015

Ok at first that did not do a thing but then i removed the space between the !important declaration and the color hex code. But what that did was change the color of the input text - not the placeholder text.

I modified your code and tried:

#Top_bar .search_wrapper input-placeholder { color:blue!important; }

But that did not work. Is it possible to change the colour of the Placeholder text in the search field?

Albert · March 2015

We have no idea where you get this code but definitely is wrong. You should use below css instead to change placeholder text:

#Top_bar .search_wrapper input[type="text"] { color: #000 !important; }

rarch47 · March 2015

I know you have given me the same css code again, but it did not work for me the first time. That's why I went and experimented with the code quite a bit.

I give up. It's not important

Albert · March 2015

As you want, but if you will send us url to your website then we can check what is the problem. There is only 3 reasons why this won't work on your side:

1. You use cache

2. You did mistake somewhere in your custom css and any code below broken css won't work

3. You copied this code in wrong place or with unnecessary tags

bowman9991 · April 2015

rarch47 , this is what you need. Will change search placeholder text to white in all browsers. Cheers. John.

#Top_bar .search_wrapper input[type="text"]::-webkit-input-placeholder {
color: #ffffff;
}

#Top_bar .search_wrapper input[type="text"]:-moz-placeholder { /* Firefox 18- */
color: #ffffff;
}

#Top_bar .search_wrapper input[type="text"]::-moz-placeholder { /* Firefox 19+ */
color: #ffffff;
}

#Top_bar .search_wrapper input[type="text"]:-ms-input-placeholder {
color: #ffffff;
}

rarch47 · April 2015

BAZZZINGA! Thanks John!

coltrucker · March 2017

Thanks John!

georgetate · June 2021

Spent 2 hrs trying to implement Albert's code #Top_bar .search_wrapper input[type="text"] { color: #000 !important; }

+ other suggested solutions with no luck. Finally found John's code which works fine !

Pablo · June 2021

Hello @georgetate,

I'm glad that you solve your problem, is there anything else we can help you with?

thanks

Change colour of search bar placeholder text

Comments