Feb 17, 2011

How to Change the Size and Styling of your Blogger Blog's Search Bar With CSS

Don't trust Chrome's inspector to "take" any changes you make on this input box. Here's some CSS for styling the search box that Blogger gives you.

input.gsc-input {
padding-left: 8px;
padding-right: 8px;
padding-top: 8px;
padding-bottom: 8px;
border-style: solid;
border-width: 1px;
border-color: #BCCDF0;
width: 99%;
font-size: 1.5em;
font-family: "Yanone Kaffeesatz";
}

And for the "search" button:

.gsc-search-button {position: absolute; right: 0; top: 40px; height: 30px; width: 100px;}

Here's my CSS for the search title:
#CustomSearch1 h2.title {color: white;}