Working with Google Custom Search (GCSE)

Lately I’ve been working on a website that integrates Google Custom Search Engine (GCSE). I haven’t worked with GCSE before and found it somewhat difficult to work with. The API and creating the search is a really easy process and the Google team did a great job with sensible defaults. The main problem for our team was that we had already built a search component in our front-end build that looked like this:

First we swap out our default HTML component with the tag required for GCSE:

If you’ve used GCSE before you’ll know that the default input supplied looks pretty bad. It’s very basic and looks good on a blank HTML page but would totally throw off our design and get rejected by the client.

Our once beautiful search input has been stretched to 100% and our button is doing all sorts of crazy things. No good.

The first step was to see what styles I available to me. Luckily the input is brought in through the creation of a DOM element using JS instead of what our team was worried about, which was an uncontrollable iframe. Google gives us some options within the developer console to set colours and borders but not nearly enough.

I used the SCSS below to style our input correctly:

#___gcse_0 {
  position: relative;
  width: 350px;

  #gs_tti50 {
    padding: 0 !important;
  }

  .gsc-input {
    padding: 0 !important;
    border: none !important;
    border-radius: .1875rem !important;
    font-size: 1rem !important;
    width: 18.75rem !important;
    color: #343741 !important;
    height: 2.4375rem !important;
    vertical-align: bottom !important;

    -i-id1 {
      padding: 0 0.925rem !important;
      background-color: rgba(255,255,255,.8) !important;
      background-image: none !important;
      position: absolute;
      top: 6px;

    &:focus, &:active {
      background-color: rgba(255,255,255,1) !important;
    }
  }

  .gsib_b {
    display: none;
  }
}

  .gsc-input-box {
    border: none !important;
    background-color: transparent !important;
  }
}

.gsc-search-button {
  position: relative;
  top: 5px;
  left: -3px;
}

There’s a whole bunch of styles in there that are specific to our project so they won’t all apply to you but the selectors should be able to give you a great start. You’ll notice that about three quarters of the attributes have an !important tag on them and I wish they didn’t but the Google supplied JavaScript puts everything directly into style='...' HTML attributes so we’re kinda stuck forcing everything in.

Adding in these styles gets us most of the way there but there is still a layout bug that we need to fix.

The problem here is that the button goes crazy and tries to go 100% width and has some other absolute positioning that really breaks things. I decided to use JavaScript (and jQuery) to solve this problem. I chose to use JS because it let me inject the button we were using before in our front-end cut. It also let’s me set the placeholder attribute on the input field, which was a hard requirement from the client.

I place this code underneath the code intializing the custom search:

var GSCInterval = setInterval(function() {
  $(".gsc-search-button").html('<button class="btn btn-search icon-search-white-sm">Search</button>');
  $("input.gsc-input").attr('placeholder', 'Search...');

  // Clear the interval when GSC elements have their set attributes.
  if ($("input.gsc-input").attr('placeholder') === 'Search...') {
    clearInterval(GSCInterval);
  }
}, 1000);

Because the Google custom search code is asynchronous we don’t know exactly when it will finish. I run an interval every second that will attempt to replace the button with our previous button and the placeholder. In that same interval we check if the placeholder has been set. If it has we clear the interval. If not we run it again. I tested this on everything from bad 2G connections through to strong WiFi and it has worked every time with good results across the board.

That’s it. With some simple CSS, JavaScript and a ton of !importants we can create a custom search for our site that looks exactly like we want it to!