Search code examples
cssgoogle-custom-searchzendesk

CSS issue with styling the Google custom search box

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.

Solution

  • 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;
}