CSS issue with styling the Google custom search box

Question

I'm trying to include the Google custom search on our help center. The functionality is ok, however, the styling is quite wrong.

I am pretty sure that some CSS must be overriding/interfering with the Google styles, but I can't seem to find out which ones (tables I guess).

More specifically:

1. The text entry field is not vertically center-aligned.
2. The search button is not displayed properly.

This is the link to the sandbox I'm working in, the search bar is in the container below the header: https://acrolinx1429009760.zendesk.com/hc

Side note: I only have access to the one main CSS file from Zendesk.

Any help would be greatly appreciated, thanks.

Answer 1

Add box-sizing: content-box; to .cse .gsc-search-button input.gsc-search-button-v2, input.gsc-search-button-v2 for the second issue.

If you want to align center the text in the input field (which I do not recommend!), add text-align center to that element. I don't recommend this because people are used to text in a search box to be left aligned. Rather, I'd make your search bar smaller.

So in total, add this CSS:

.cse .gsc-search-button input.gsc-search-button-v2, input.gsc-search-button-v2 {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}
.gsc-search-box-tools .gsc-search-box .gsc-input {text-align: center;}

Though, as I said, I'd recommend leaving out that last line and making the input smaller. Something like this:

#cse {
    width: 60%; /* make sure you don't use inline width */
    margin: 0 auto;
}
.cse .gsc-search-button input.gsc-search-button-v2, input.gsc-search-button-v2 {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

Answer 2

Try this it must work:

CSS

.cse .gsc-search-button input.gsc-search-button-v2, 
input.gsc-search-button-v2 {
  width: auto; // CHANGED
  height: 28px; // CHANGED
  padding: 6px 27px;
  min-width: 13px;
  margin-top: -1px; // CHANGED
}

.gsc-input-box 
 {
  border: 1px solid #D9D9D9;
  background: #fff;
  height: 28px; // CHANGED
 }

input.gsc-input 
{
  font-size: 19px;
  text-align: center; // ADDED
  padding: 4px 9px;
  border: 1px solid #D9D9D9;
  width: 99%;
}

Answer 3

Google custom search automatically insert their style sheet. But you can customize it according to your requirement like here I'm removing the extra height which was appearing as an extra space-

<style type="text/css">
   .gsc-control-cse
    {
        height:20px;
        !important;     
    }
    .gsc-control-cse-en
    {
        height:20px;
        !important;
    }
</style>

......

    <div class="customSearch" style="border:0px solid;margin:-15px;width:30%;height:auto;">
    <script>
      (function() {
        .....
      })();
    </script>
    <gcse:search enableAutoComplete="true"></gcse:search>
    </div>