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;
}