Как заменить увеличительное стекло поисковой системы Google с помощью кнопки «поиск»?

Question

Я использую базовый код и стандарт «компактный» темы для GCSE:

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

Это делает кнопку ввода, как:

<td class="gsc-search-button"> 
    <input type="image" src="http://www.google.com/uds/css/v2/search_box_icon.png" class="gsc-search-button gsc-search-button-v2" title="search"> 
</td> 

Я хотел бы, чтобы это было что-то вроде

<td class="gsc-search-button"> 
    <input type="button" value="search" title="search"> 
</td> 

Я не могу понять, как это сделать. Это возможно?

Answer 1

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

Вы можете изменить тему, нажав на ссылку «Look and feel» в левом меню во время процесса создания. Затем нажмите вкладку темы, чтобы изменить ее. После изменения темы, содержащей текст поиска, вы можете щелкнуть вкладку «Настроить», чтобы еще больше изменить цвета.

https://support.google.com/customsearch/answer/4513783?hl=en

Answer 2

Использование JQuery, вы можете сделать это довольно легко.

После загрузки фрагмент Google, выполнить этот код:

$("td.gsc-search-button").empty().html('<input type="button" value="search" title="search">'); 

Вам просто нужно, чтобы убедиться, что код выше работает после кода Google.

-Asrar

Answer 3

атрибут CSS, который не позволяет изображение кнопки, которое будет показано в файле bootstrap.css глобальный box-sizing: inherit. Если вы используете bootstrap, вы должны переопределить этот атрибут, чтобы иметь значения inherit или content-box. Вы можете переопределить этот атрибут, поместив ваши пользовательские элементы поиска в div и предоставив этому div класс, который имеет этот атрибут с !important.

Я только что нашел это, и это работает для меня.

Это все!

Answer 4

function myCallback() { 
    $("td.gsc-search-button input").attr("type", "submit").attr("value", "submit"); 
} 

window.__gcse = { 
    callback: myCallback 
}; //.......load google CSE tag after this 

Это работает для меня, и в нем хранятся все обработчики событий.