Google站内搜索JavaScript源代码

Google站内搜索官方代码

<script async src="https://cse.google.com/cse.js?cx=12345678"></script>
<div class="gcse-search"></div>

个性化搜索框placeholder

<!--Google-->
<div id="search-box">
   <script>
     (function() {
       var cx = "123********789:123******";
       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()
     { 
       var searchBox =  document.getElementById("gsc-i-id1");
       searchBox.placeholder="用Google搜索内容";
       searchBox.title="输入Google搜索关键词"; 
     }
   </script>
   <gcse:search></gcse:search>
</div>
<!--Google-->

样式表例子

.gsc-control-cse {
    padding: 0px !important;
    border-width: 0px !important;
}

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

.gsc-search-box .gsc-input {
    padding: 0 !important;
}

#gsc-iw-id1 {
    height: auto !important;
    padding: 0px !important;
    border-width: 0px !important;
    box-shadow: none !important;
}

#gs_tti50 {
    padding: 0px !important;
}

#gsc-i-id1 {
    height: 37px !important;
    padding: 2px 10px !important;
    background: #ebebeb !important;
    text-indent: 0px !important;
}

.gsib_b {
    display: none;
}

td.gsc-search-button {
    border: 0;
}

button.gsc-search-button {
    display: block;
    width: 100% !important;
    height: 37px !important;
    border-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    outline: none;
    cursor: pointer;
    box-shadow: none !important;
    box-sizing: content-box !important;
    background-color: #3690cf;
}

.gsc-branding {
    display: none !important;
}

.gsc-control-cse,
#gsc-iw-id1 {
    background-color: transparent !important;
}

#search-box {
    width: 90%;
    margin: 10px auto 0;
}

#gsc-iw-id1,
.gsc-input {
    border: 0;
}

#gs_id50 {
    margin: 0;
}

td.gsc-input {
    display: inline-block;
    float: left;
    width: 80%;
}

td.gsc-search-button {
    display: inline-block;
    width: 20%;
    margin: 0;
    padding: 0;
}

table.gsc-search-box td {
    vertical-align: left;
}

#gsc-iw-id1 {
    width: 100%;
}

#gs_tti50 {
    border: 0;
}