Adding placeholder to text box in google custom se

Question

I have added google custom search engine using following code.

(function() {
    var cx = '005899633628958982661:wekn1lpckzg';
    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);
})();

Now I have a working search box for my site, the only problem is that I am unable to use placeholder for the search-text box.

I also tried the code

$('input.gsc-input').attr('placeholder', 'custom text here');

but it is not working.

Answer 1

I used the following code, it worked for me!

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

window.onload = function(){
document.getElementById('gsc-i-id1').placeholder = 'SEARCH';
};

Answer 2

This one works for me:

window.onload = demo;

function demo() {
    document.getElementById("gsc-i-id1").setAttribute("placeholder", "SEARCH")
}