step 1. add code to google custom search box code

After Google supplies you with the Google Custom Search box code for your website, add the orange code below to the code Google provided you, as shown below in orange:

​<script>
  (function() {
    var cx = 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX';
    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!';
  };
</script>
<gcse:searchbox-only></gcse:searchbox-only>

---

Step 2. Add your placeholder text to google custom search code

​And to change the placeholder for your Google Custom Search box, simply change the orange text in the code above as shown below:

​<script>
  (function() {
    var cx = 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX';
    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!';
  };
</script>
<gcse:searchbox-only></gcse:searchbox-only>

---

You're done! Publish your site to see your Google Custom Search box's placeholder!

---

comments powered by Disqus