How to change the header search background color

Here’s the CSS that controls the header search background.

#header-search .search-field {
    height: 45px;
    vertical-align: middle;
    background: rgba( 255, 255, 255, 0.1 );
    color: #333;
    font-size: 11px;
    text-transform: uppercase;
    width: 200px;
    border-bottom: 0px;
    border-top: 0px;
    border-left-color: rgba( 0, 0, 0, 0.1 );
}

It’s uses an Opacity of 0.1 of a white background to give some transparency with darker background color options.

So if you want to make the search box pop out more on dark background try changing the Opacity first. Like this from 0.1 to 0.5. If you got to just 1, it will be white.

#header-search .search-field {
    background: rgba( 255, 255, 255, 0.5 );
}

If you want to just make it a completely different color like black, try this.

#header-search .search-field {
     background: #000;
    color: #fff;
}

Previous Post

How To Make A Single Post Full Width

Next Post

How to Add Menu Separators to Our Themes

Leave a Reply

Your email address will not be published. Required fields are marked *