[Blogger] 6種客製化搜尋框

新增客製化搜尋框：後台> 版面配置> 新增小工具> 設定 HTML/JavaScript

<style>
#searchbox {
    background: #d8d8d8;
    border: 4px solid #e8e8e8;
    padding: 20px 10px;
    width: 250px;
}
input:focus::-webkit-input-placeholder {
    color: transparent;
}

input:focus:-moz-placeholder {
    color: transparent;
}

input:focus::-moz-placeholder {
    color: transparent;
}

#searchbox input {
    outline: none;
}

#searchbox input[type="text"] {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxca1Uqi_SsLzd7raIrOxMdgRcgjI5ANa_dK8nEbpL4QH4Y6dP6Z2H_brKreR-qpeWu9loWBeh-NNLDnDLaiiCX6pLqmZOaB56ojQTlun_S6ljf-jND5G3UwzjwcW_OlbBYF9DxyImmOu7/s1600/search-dark.png) no-repeat 10px 6px #fff;
    border-width: 1px;
    border-style: solid;
    border-color: #fff;
    font: normal 16px \5FAE\8EDF\6B63\9ED1\9AD4,Arial,Helvetica,Sans-serif;
    color: #bebebe;
    width: 55%;
    padding: 8px 15px 8px 30px;
}


#button-submit {
    background: #6A6F75;
    border-width: 0px;
    padding: 9px 0px;
    width: 23%;
    cursor: pointer;
    font: normal 16px \5FAE\8EDF\6B63\9ED1\9AD4,Arial, Helvetica;
    color: #fff;
    text-shadow: 0 1px 0 #555;
    margin: 0 auto;
    float:right;
}

#button-submit:hover {
    background: #4f5356;
}

#button-submit:active {
    background: #5b5d60;
    outline: none;
}

#button-submit::-moz-focus-inner {
    border: 0;
}
</style>

<form id="searchbox" method="get" action="/search">
<input name="q" type="text" size="15" placeholder="Type here..." />
<input id="button-submit" type="submit" value="Search" />
</form>

Source

☞ Add 6 Stylish Custom Search Boxes To Blogger