Окно поиска Google

Question

У меня есть этот код для окна поиска Google. Я хочу уменьшить размер. Я помещаю его на сайт, используя html и css.

<script> 
    (function() { 
    var cx = '004761606621672356167:q2rk-jxubla'; 
    var gcse = document.createElement('script'); 
    gcse.type = 'text/javascript'; 
    gcse.async = true; 
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + 
     '//www.google.com/cse/cse.js?cx=' + cx; 
    var s = document.getElementsByTagName('script')[0]; 
    s.parentNode.insertBefore(gcse, s); 
    })(); 
</script> 
<gcse:search></gcse:search> 

Answer 1

Поскольку окно поиска отображается непосредственно на вашей странице, вы можете применять любые стили, которые хотите сделать так, как хотите. Просто изучите структуру HTML рендеринга и напишите необходимые настройки CSS.

Например:

(function() { 
 
    var cx = '004761606621672356167:q2rk-jxubla'; 
 
    var gcse = document.createElement('script'); 
 
    gcse.type = 'text/javascript'; 
 
    gcse.async = true; 
 
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + 
 
     '//www.google.com/cse/cse.js?cx=' + cx; 
 
    var s = document.getElementsByTagName('script')[0]; 
 
    s.parentNode.insertBefore(gcse, s); 
 
})();

.search-box .gsc-control-cse { 
 
    width: 200px; 
 
} 
 
.search-box input.gsc-search-button { 
 
    background-color: #5FC34F; 
 
}

<div class="search-box"> 
 
    <gcse:search></gcse:search> 
 
</div>

Единственная сложная вещь, что вы должны убедиться, что ваши новые заявления CSS имеют больше приоритет, то импортированные Google стили поле поиска. Вот почему вы должны сделать свои селекторы более конкретными. Как и в моем примере, я использовал еще один родительский селектор .search-box.

Answer 2

Быстрая и грязная, просто уменьшая размер кода:

<script> 
    (function() { 
     var d = document, t = 'script'; 
     var g = d.createElement(t); 
     g.type = 'text/java'+t; g.async = true; 
     g.src = (d.location.protocol == 'https:' ? 'https:' : 'http:') + '//www.google.com/cse/cse.js?cx=004761606621672356167:q2rk-jxubla'; 
     var s = d.getElementsByTagName(t)[0]; s.parentNode.insertBefore(g, s); 
    })(); 
</script> 
<gcse:search></gcse:search> 

Или, если вы знаете, что это будет только HTTP:

<script> 
    (function() { 
     var d = document, t = 'script'; 
     var g = d.createElement(t); 
     g.type = 'text/java' + t; g.async = true; g.src = 'http://www.google.com/cse/cse.js?cx=004761606621672356167:q2rk-jxubla'; 
     var s = d.getElementsByTagName(t)[0]; s.parentNode.insertBefore(g, s); 
    })(); 
</script> 
<gcse:search></gcse:search> 

Не тестировался ..

Answer 3

проверки с вашим в браузере вы можете найти классы и идентификаторы, а затем добавить новые стилосты и использовать !important для ограничения своих новых правил.

использовать как this-

.cse .gsc-control-wrapper-cse, .gsc-control-wrapper-cse { 
    width: 200px !important; 
    margin:0 auto !important; 
}