change font color in search box

Hi, what is the URL of your site?

infoliga.schleider.com.ar

You’ll need to add the following custom CSS:

.header-search input:focus {
    color: #fff;
}

Don’t edit the theme files directly, otherwise, your changes will be overwritten whenever the theme is updated.

Since you’re already using Jetpack, an easy way to add custom CSS is to activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS.

As alternatives, you could either install a standalone custom CSS plugin, or create a child theme.

but I already have this:

.header-search {
background: transparent;
vertical-align: top;
position: relative;
top: -47px;
left: 800px;
float: center;
background-image: none;
filter: none;
}

which lines I must add to change font color?

If I understand you correctly, you want the text to be lighter when you are typing in the search box. The CSS that I gave you is specifically for when the text box is active (has the focus). If you add my CSS, I’m sure you’ll get the effect you’re looking for.

How mine if different to your is that mine has input:focus just after .header-search. This means the browser will use this CSS when someone starts typing in the search box.

Let me know if I haven’t understood the problem.

This is my original menu

https://s2.subirimagenes.com/imagen/previo/thump_9596172captura-de-pantalla.png

When I add the input-focus look what happen

https://s2.subirimagenes.com/imagen/previo/thump_9596174captura-de-pantalla.png

Can you paste a copy of all the CSS you’re using here?

Am I right in assuming you’re using the Jetpack CSS Stylesheet Editor? If it’s enabled, you’ll find it here: Dashboard > Appearance > Edit CSS.

I am using jetpack css editor

.header-search {
background: transparent;
vertical-align: top;
position: relative;
top: -47px;
left: 750px;
float: center;
background-image: none;
filter: none;
}

li.social-icon {
float: right;
margin-right: 7px;
font-size: 10px;
}

Hi there,

From the second screenshot, it seems that there was something missing from the custom CSS that caused it to fail. This could have been anything from a missing } to a missing ;

Can you please try pasting @robhob’s snippet below the existing CSS via Appearance > Edit CSS again? Please double check that there are no missing pieces:

.header-search input:focus {
    color: #fff;
}

Let us know how you get on with that.

Worked! Thanks

@siobhan thank’s for helping out. @dem10, glad it’s working.

You’re welcome! Thanks to you too, @robhob.