CSS issue with styling the Google custom search box -
i'm trying include google custom search on our center. functionality ok, however, styling quite wrong.
i pretty sure css must overriding/interfering google styles, can't seem find out ones (tables guess).
more specifically:
- the text entry field not vertically center-aligned.
- the search button not displayed properly.
this link sandbox i'm working in, search bar in container below header: https://acrolinx1429009760.zendesk.com/hc
side note: have access 1 main css file zendesk.
any appreciated, thanks.
add box-sizing: content-box; .cse .gsc-search-button input.gsc-search-button-v2, input.gsc-search-button-v2 second issue.
if want align center text in input field (which not recommend!), add text-align center element. don't recommend because people used text in search box left aligned. rather, i'd make search bar smaller.
so in total, add 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, said, i'd recommend leaving out last line , making input smaller. this:
#cse { width: 60%; /* make sure 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; }
Comments
Post a Comment