Logo

Ir Para o Site

Como remover a margem ou o espaçamento na busca personalizada do Google ?

"Custom Search Engine" ou "Pesquisa Personaizada do Google" é um recurso oferecido pelo Google onde é possível determinar os resultados de pesquisas somente em um ou alguns domínios e personalizar os elementos de layout por cores. A personalização ocorre no painel da Pesquisa Personaizada do Google através de uma paleta de cores

Entretanto a Pesquisa Personaizada do Google não oferece a opção de remover a margem ou espaçamento do campo de pesquisa, nem tornar o fundo transparente. Conforme mostrado no exemplo abaixo:

Pesquisa Personalizada Google

Para corrigir este problema basta inserir o código CSS abaixo na página onde o código da Pesquisa Personaizada do Google está rodando. É possível fazer uma infinidade de alterações na folha de estilo CSS do código.

   /* Google Search box styles */  
#___gcse_0 {
    display: inline-block !important;
}

#___gcse_0 table {
    border-top: none !important;
    border-right: none !important;
    border-left: none !important;
    border-bottom: none !important;
    background: transparent !important;
    margin: 0 0 0 0 !important;
}

#___gcse_0 tbody {
    border-top: none !important;
}

#___gcse_0 .forum-table td,
#___gcse_0 td,
#___gcse_0 tr,
.gsc-completion-container td {
    padding: 0 !important;
    border-top: none !important;
    border-right: none !important;
    border: none !important;
}

#___gcse_0 input[type="text"] {
    padding: 4px !important;
    -webkit-border-radius: none;
    -moz-border-radius: none;
    border-radius: none;
    max-width: 999px;
    background: transparent !important;
    border: none !important;
}

.gsc-completion-container {
    border: 1px solid #6D7552 !important;
    background: #F0F1CB !important;
    font-family: inherit !important;
    padding: 4px !important;
    color: #D14F2D !important;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    box-shadow: 2px 2px 10px #363636;
}

.gsc-completion-selected {
    margin: 0 -4px -4px -4px;
}

.gsc-completion-container b {
    color: #242424 !important;
    font-weight: 300;
}

.gsc-completion-container table {
    border-top: none !important;
    border-right: none !important;
    border-left: none !important;
    border-bottom: none !important;
}


.gsc-modal-background-image {
    background-color: #000 !important;
}

.gsc-modal-background-image-visible {
    opacity: 0.4 !important;
    -ms-filter: "alpha(opacity=40)" !important;
    filter: alpha(opacity=40) !important;
}

.gsc-results-wrapper-overlay {
    background: #F0F1ED !important;
    border: solid 1px #A9ADA4 !important;
}

.gsc-webResult.gsc-result,
.gsc-results .gsc-imageResult,
.gsc-webResult.gsc-result:hover,
.gsc-imageResult:hover {
    border-color: transparent !important;
    background-color: transparent !important;
}

.gsc-webResult.gsc-result {
    border: 1px solid transparent !important;
}

.gsc-webResult .gsc-result {
    border-bottom: 1px solid transparent !important;
}

#___gcse_0 .cse .gsc-control-cse,
#___gcse_0 .gsc-control-cse {
    padding: 0 !important;
    width: 280px !important;
    display: inline-block;
}

form.gsc-search-box {
    margin-bottom: 0 !important;
}

#___gcse_0 .cse .gsc-control-cse,
#___gcse_0 .gsc-control-cse {
    background-color: rgba(0, 0, 0, 0) !important;
    border: none !important;
}

#___gcse_0 .gsc-search-box .gsc-input>input:hover,
#___gcse_0 .gsc-input-box-hover {
    border: none !important;
    border-top-color: rgba(0, 0, 0, 0) !important;
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

#___gcse_0 .gsc-input-box {
    background: #F0F1ED !important;
    border: solid 1px #A9ADA4 !important;
    height: 25px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

input.gsc-search-button,
input.gsc-search-button:hover,
input.gsc-search-button:focus {
    background-image: none !important;
    height: 14px !important;
    width: 14px !important;
    margin-left: 5px !important;
    -webkit-border-radius: 4px 4px !important;
    -moz-border-radius: 4px 4px !important;
    border-radius: 4px !important;
    padding: 5px !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d5d6d3', endColorstr='#a8aca3',GradientType=0 ) !important;
    border: solid 1px #858A7F !important;
    border-color: #858A7F;
}