[Resolved] 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 🙂

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

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

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

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 🙂

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 🙂

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

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