1

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>
3

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

  • Is there a good reference for this?? I am tackling the whole search thing on my new layout and absolutely hate the Google form options since they look like absolute multi-colored, mildly aged, and possibly moldy dog squeeze on my site. Would like a form that looks like my other site elements. I am willing to do all my mods in css and will take this answer for a starting point. – closetnoc May 18 '15 at 16:47
  • @closetnoc Yes, but I can't really share the url here since it's an intranet Drupal install that uses it. Ill try my hand at a fiddle if I get a minute (and if it even works in fiddle haha) – dhaupin May 19 '15 at 21:32
  • You don't have to kill yourself over it. I just though maybe someone detailed it fairly well somewhere. I found stuff, but it was scant at best. I am using Chrome Developer Tools and manually going through the mountain of s**t the Google code creates and have had some success. I am going through now and organizing my efforts a bit more cleanly- less hacky- so that it will be easier to make it mobile friendly in the end. If you find a good resource, that would be helpful, but if it becomes too much work, get beer instead! ;-) I'll buy!! Not sure how though... – closetnoc May 19 '15 at 21:37
  • BTW- free website idea or eyedeer depending on where you live. buyyouabeer.com where people can offer to buy people a beer by registering and having the beer waiting for them at the bar. Of course the bar would have to participate, but it could work all over the world. – closetnoc May 19 '15 at 21:40
  • @closetnoc Amen brother, there is wayyyyyyy too much un-needed and repetitive junk elements in the CSE widget. That is an awesome idea for a site!!! That type of donation is brilliant. Hurry delete it before others see it and steal your idea :) Ok not sure if the autocomplete will work or how long the test CSE will take to index, but here she is jsfiddle.net/yy1chuxw – dhaupin May 19 '15 at 21:42
1

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.

  • I use this approach as well. It also allows easy integration with Google Analytics since the search term will be in a query string parameter where Google Analytics expects it. – Stephen Ostermiller Jan 15 '15 at 18:26
  • @StephenOstermiller Does this still work for you?? I am having trouble with this... does not go to the page specified in action= to start. I am sure there is something rather simple wrong, but my code is so nearly identical to this example that something has to be up that I am missing... fairly tired still from the weekend's work so it is slightly foggy in the cockpit! – closetnoc May 18 '15 at 16:43
  • Yes, it is still working. I have it set up here. – Stephen Ostermiller May 18 '15 at 16:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.