[Resolved] Changing the text color of the search bar

[Siong Boon Lim]

Hi Tom,

I have a search bar located on the top right hand side of the page “Search Store”,
https://www.ioanything.com/

I want to change the text color,
and tried locating the css selector using the inspector, but there are nothing controlling the text color which is now displaying as light grey color.

Appreciate your help on this.
Thank you.

[Tom]

Hi there,

So first, change it within the search field:

.widget .search-field {
    color: red;
}

Then change it on focus (when you’re typing):

.widget .search-field:focus {
    color: red;
}

Then you need to change the placeholder:

.widget .search-field::-webkit-input-placeholder {
    color: red;
}

.widget .search-field:-ms-input-placeholder {
    color: red;
}

.widget .search-field:-moz-placeholder {
    color: red;
    opacity: 1;
}

.widget .search-field::-moz-placeholder {
    color: red;
    opacity: 1;
}

Hope this helps 🙂

• This reply was modified 8 years, 2 months ago by Tom.

[Siong Boon Lim]

Hi Tom,

I still can’t make it change color.
The text “Search Store” remain light grey in color.

All the 5 sets of css code is inserted to the css style file.
I even put the code at the end of the file, still no effect.

This is tricky.
I don’t know why.

[Tom]

I’m seeing your only using 3 character values for the colors – can you try using the full 6 character values?

[Siong Boon Lim]

The 3 char color code is for the rest which is working.
I tried your suggestion using “red”. Exactly the same. but nothing happen.
I have removed it, since it doesn’t change anything.
I also tried editing it from the inspector, also no reaction.

[Tom]

Can you add the code I provided back even thought it doesn’t do anything? I want to see what’s overriding it.

[Siong Boon Lim]

Hi Tom,

I added in your css code.
Same code, I didn’t change the color.

Thank you for your help.

[Tom]

I’ll check this out once I get back to my desktop (on an iPad next to a sleeping newborn baby right now).

Hoping we’ll be home tomorrow 🙂

[Siong Boon Lim]

Rest well. Enjoy the moment.

[Tom]

Did you manage to fix this? The text in the search bar is red for me.

If you’re not seeing it, try clearing your browser cache and checking again 🙂

[Siong Boon Lim]

Now I can see the red too. But it is when I type the text.
I would like the word “Search Store” to be in another color.
Not the typed letters.
I have tried clearing the cache as your instruction, it still remains as light grey color.

[Tom]

That’s odd – it’s red for me.

What browser are you using? The placeholder is tough to change colors, the code I gave you should do it in Chrome/Safari/Opera, Firefox and IE (recent versions).

[Siong Boon Lim]

I am using firefox 44.0.
This means that there is problem with my browser.
I will try other computer.
Thank you for your help.

[Tom]

Just did a little research on it – try the updated code above 🙂

[Siong Boon Lim]

Oh. It works with your updated code above.
I don’t quite understand why, but it works.

Thank you very much.

[Author]

Posts