: How to change the background color of searchbox for Google CSE? How can I change the background color for search box of google custom search? It is white by default, I want to set it to

How can I change the background color for search box of google custom search?
It is white by default, I want to set it to gray, so that it looks like this example.

The V1 CSS code for the search box is as follows:

<div id='cse-search-form' style='width: 100%;'>Loading</div>
<script src='//www.google.com/jsapi' type='text/javascript'></script>
<script type='text/javascript'>
google.load('search', '1', {language: 'en', style: google.loader.themes.V2_DEFAULT});
google.setOnLoadCallback(function() {
var customSearchOptions = {};
var orderByOptions = {};
orderByOptions['keys'] = [{label: 'Relevance', key: ''} , {label: 'Date', key: 'date'}];
customSearchOptions['enableOrderBy'] = true;
customSearchOptions['orderByOptions'] = orderByOptions;
var customSearchControl = new google.search.CustomSearchControl('XXXXXXXXXXXXXXX:x-xxxxxxx', customSearchOptions);
customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
var options = new google.search.DrawOptions();
options.enableSearchboxOnly('https://www.google.com/cse?cx=XXXXXXX:x-xxxxxxx', null, true);
options.setAutoComplete(true);
customSearchControl.draw('cse-search-form', options);
}, true);
</script>
<style type='text/css'>
input.gsc-input, .gsc-input-box, .gsc-input-box-hover, .gsc-input-box-focus {
border-color: #D9D9D9 ;
}
input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus {
border-color: #444444 ;
background-color: #444444 ;
background-image: none;
filter: none;

}
</style>

10.02% popularity Vote Up Vote Down

: Non existent image files are not being handled by PHP as they should due to ngnix configuration I am currently building a web application. In order for it to work properly I wrote this rule:

@YK1175434

Posted in: #Htaccess #Images #Nginx #Php #UrlRewriting

1 Comments

: Automatically subscribe to Facebook page I have two company facebook pages. We do same industry, just slightly different. Thus we have two company pages. Lets call them Apage and Bpage. I want

@YK1175434

Posted in: #FacebookApplication

1 Comments

: Force searchaction (Google Sitelinks Search) to pull new meta information We use the Yoast SEO tool for Wordpress, and a recent feature added the SearchAction meta tags to allow for sitesearch

@YK1175434

Posted in: #Google #Search #Sitelinks

2 Comments

: Are HTML sitemaps needed in modern websites? Most of the articles you find regarding HTML sitemaps these days seem to be based on old and outdated sources, especially this 6 year old video.

@YK1175434

Posted in: #Google #Html #Seo #Sitemap

1 Comments

Login to post a comment!

2 Comments

Sorted by latest first Latest Oldest Best

@BetL925

Thanks for all who replied.

I found the solution explained in this link as the most useful approach to customize the google CSE search box.

You can use the FORM tag as follows, and use any CSS customization on that tag div.

<div class="top-search">
<form method="get" id="searchform" id="searchbox_XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" action="search-result.html">
<div>
<input value="XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" name="cx" type="hidden"/>
<input value="FORID:11" name="cof" type="hidden"/>
<input type="text" value="Search..." name="s" id="s" onfocus="defaultInput(this)" onblur="clearInput(this)" />
<input type="submit" id="searchsubmit" value=" " />
</div>
</form>
</div>

The link above also explains how to show results in a pre-designed page.

10% popularity Vote Up Vote Down

@Jessie594

CSE is a bit tricky to tackle down. Often you need to use a more specific target, or use !important to force styles. Technically it should only need this rule (test will turn it red) but the CSE box is heavily styled by Google. Try this first:
#___gcse_0 input[type="text"] {
background: #F00 !important;
}

If that doesnt work, try combing it with a CSE teardown that will help skin it like your site. This example won't make it look like your site per-say, but it lays out all the rules needed to do so. Tweak it up or clean it up as desired (its kinda messy pulled from an old theme hah):

/* Google Search box styles */ #___gcse_0 {
display: inline-block !important;
}

#___gcse_0 table {
border-top: none !important;
border-right: none !important;
border-left: none !important;
border-bottom: none !important;
background: transparent !important;
margin: 0 0 0 0 !important;
}

#___gcse_0 tbody {
border-top: none !important;
}

#___gcse_0 .forum-table td,
#___gcse_0 td,
#___gcse_0 tr,
.gsc-completion-container td {
padding: 0 !important;
border-top: none !important;
border-right: none !important;
border: none !important;
}

#___gcse_0 input[type="text"] {
padding: 4px !important;
-webkit-border-radius: none;
-moz-border-radius: none;
border-radius: none;
max-width: 999px;
background: transparent !important;
border: none !important;
}

.gsc-completion-container {
border: 1px solid #6D7552 !important;
background: #F0F1CB !important;
font-family: inherit !important;
padding: 4px !important;
color: #D14F2D !important;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
box-shadow: 2px 2px 10px #363636;
}

.gsc-completion-selected {
margin: 0 -4px -4px -4px;
}

.gsc-completion-container b {
color: #242424 !important;
font-weight: 300;
}

.gsc-completion-container table {
border-top: none !important;
border-right: none !important;
border-left: none !important;
border-bottom: none !important;
}

.gsc-modal-background-image {
background-color: #000 !important;
}

.gsc-modal-background-image-visible {
opacity: 0.4 !important;
-ms-filter: "alpha(opacity=40)" !important;
filter: alpha(opacity=40) !important;
}

.gsc-results-wrapper-overlay {
background: #F0F1ED !important;
border: solid 1px #A9ADA4 !important;
}

.gsc-webResult.gsc-result,
.gsc-results .gsc-imageResult,
.gsc-webResult.gsc-result:hover,
.gsc-imageResult:hover {
border-color: transparent !important;
background-color: transparent !important;
}

.gsc-webResult.gsc-result {
border: 1px solid transparent !important;
}

.gsc-webResult .gsc-result {
border-bottom: 1px solid transparent !important;
}

#___gcse_0 .cse .gsc-control-cse,
#___gcse_0 .gsc-control-cse {
padding: 0 !important;
width: 280px !important;
display: inline-block;
}

form.gsc-search-box {
margin-bottom: 0 !important;
}

#___gcse_0 .cse .gsc-control-cse,
#___gcse_0 .gsc-control-cse {
background-color: rgba(0, 0, 0, 0) !important;
border: none !important;
}

#___gcse_0 .gsc-search-box .gsc-input>input:hover,
#___gcse_0 .gsc-input-box-hover {
border: none !important;
border-top-color: rgba(0, 0, 0, 0) !important;
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}

#___gcse_0 .gsc-input-box {
background: #F0F1ED !important;
border: solid 1px #A9ADA4 !important;
height: 25px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}

input.gsc-search-button,
input.gsc-search-button:hover,
input.gsc-search-button:focus {
background-image: none !important;
height: 14px !important;
width: 14px !important;
margin-left: 5px !important;
-webkit-border-radius: 4px 4px !important;
-moz-border-radius: 4px 4px !important;
border-radius: 4px !important;
padding: 5px !important;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d5d6d3', endColorstr='#a8aca3',GradientType=0 ) !important;
border: solid 1px #858A7F !important;
border-color: #858A7F;
}

See The Fiddle Here

10% popularity Vote Up Vote Down

Feed

: How to change the background color of searchbox for Google CSE? How can I change the background color for search box of google custom search? It is white by default, I want to set it to

More posts by @YK1175434

: Non existent image files are not being handled by PHP as they should due to ngnix configuration I am currently building a web application. In order for it to work properly I wrote this rule:

: Automatically subscribe to Facebook page I have two company facebook pages. We do same industry, just slightly different. Thus we have two company pages. Lets call them Apage and Bpage. I want

: Force searchaction (Google Sitelinks Search) to pull new meta information We use the Yoast SEO tool for Wordpress, and a recent feature added the SearchAction meta tags to allow for sitesearch

: Are HTML sitemaps needed in modern websites? Most of the articles you find regarding HTML sitemaps these days seem to be based on old and outdated sources, especially this 6 year old video.

Login to post a comment!

2 Comments

Back to top | Use Dark Theme