[Solved] Zurb Foundation and Google Custom Search Engine layout problem

When adding a Google Custom Search box in your site that uses Zurb Foundation 4, it is most likely that the search button will be distorted and the search box won't have proper padding and you'll see various styling issues.

For a demo of a working zurb + custom search, just visit pesobility.com

The solution is to add this into your CSS:

.gsc-control-cse  * {
 -moz-box-sizing: content-box !important;
 -webkit-box-sizing: content-box !importantx;
 box-sizing:  content-box !important;
}

.gsc-control-cse input {
 box-shadow: none !important;
}

.gsc-control-cse input:focus {
    outline: none;
}

.gsc-control-cse table {
 border: none;
 background: transparent;
}

.gsc-input-box, .gsc-search-box .gsc-input>input, .gsc-input-box-hover {
 -moz-box-shadow: none !important;
 -webkit-box-shadow: none !important;
 box-shadow: none !important;
}