Changing the text color of the search bar

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 :)

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.

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

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.

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

Hi Tom,

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

Thank you for your help.

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 :)

Rest well. Enjoy the moment.

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 :)

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.

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).

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.

Just did a little research on it - try the updated code above :)

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

Thank you very much.