百度站内搜索如何设置和使用自定义样式设计（即不使用模板，使用自定义的模板）

随着百度站内搜索的上线，这为广大的站长提供极大的便利。本文主要详细的说明如何设置百度站内搜索的自定义模板，虽然百度已经提供了许多样式模板供站长们选择，但是有时候我们还是需要自己设置样式。

2015/10/27重新更新

本文写于2014/11/2，最近发现百度站内搜索有进行过改版，因此这里做下标记。现在站内搜索已经单独放在一个二级域名中，地址如下：http://zn.baidu.com，任何的后台管理操作都在这里操作。

另外关于自定义百度站内搜索，官方也提供了文档，直接看官方文档即可，下面的两个参考资料来源官方文档：

1. 使用网站已有的搜索框样式
2. 使用页面已有样式搜索框站点布署代码步骤

首先进入百度站长平台，打开站长工具=》其他工具=》站内搜索的菜单栏，

随后我们新增搜索框或者修改一个已有的搜索框样式，在搜索框样式中我们在选择样式模板单选框那选择不适用模板（自定义样式设计）。这样子我们获取到的百度站内搜索代码就是没有任何默认样式的搜索框了，接下来就是要设置我们自己的样式。

自定义样式主要是搜索代码分别为站长们提供了固定的class类名选择器，我们可以在样式文件中根据class类名选择器来设置自己的样式。下面的HTML代码是我网站上的站内搜索最终显示出来的代码（排除掉了一些脚本）：

<div id="bdcs">
    <div class="bdcs-container">
        <div class="bdcs-main bdcs-clearfix">
            <div class="bdcs-search">
                <form class="bdcs-search-form" id="bdcs-search-form" action="http://zhannei.baidu.com/cse/search" method="get" target="_blank">
                    <input name="s" type="hidden" value="10594501587238014706">
                    <input name="entry" type="hidden" value="1">
                    <input name="q" class="bdcs-search-form-input" id="bdcs-search-form-input" type="text" placeholder="">
                    <input class="bdcs-search-form-submit " id="bdcs-search-form-submit" type="submit" value="搜索">
                </form>
            </div>
        </div>
    </div>
</div>

我们可以看到可以使用的样式类名选择器是很多的，包括搜索按钮都有固定样式的class。这里我们总结下：

这是我网站上最终生成的站内搜索图片，样式和模板完全都是自定义的:

这里我也分享下我站内搜索的自定义样式CSS代码：

/*自定义百度搜索框*/
.bdcs-search-form-submit {
    display: inline-block;
    padding: 6px 12px;
    margin-top: 6px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.428571429;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #ffffff;
    background-color: #1abc9c;
    width: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.bdcs-search-form-submit:focus {
    outline: thin dotted #333;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}


.bdcs-search-form-submit:hover,
.bdcs-search-form-submit:focus,
.bdcs-search-form-submit:active,
.bdcs-search-form-submit.active,
.open .dropdown-toggle.bdcs-search-form-submit {
    color: #ffffff;
    text-decoration: none;
    background-color: #48c9b0;
    border-color: #48c9b0;
}

.bdcs-search-form-submit:active,
.bdcs-search-form-submit.active {
    background-image: none;
    outline: 0;
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.bdcs-search-form-submit:active,
.bdcs-search-form-submit.active,
.open .dropdown-toggle.bdcs-search-form-submit {
    background: #16a085;
    border-color: #16a085;
}

.bdcs-search-form-submit.disabled,
.bdcs-search-form-submit[disabled],
fieldset[disabled] .bdcs-search-form-submit {
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.65;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    box-shadow: none;
}



.bdcs-search-form-submit.disabled,
.bdcs-search-form-submit[disabled],
fieldset[disabled] .bdcs-search-form-submit,
.bdcs-search-form-submit.disabled:hover,
.bdcs-search-form-submit[disabled]:hover,
fieldset[disabled] .bdcs-search-form-submit:hover,
.bdcs-search-form-submit.disabled:focus,
.bdcs-search-form-submit[disabled]:focus,
fieldset[disabled] .bdcs-search-form-submit:focus,
.bdcs-search-form-submit.disabled:active,
.bdcs-search-form-submit[disabled]:active,
fieldset[disabled] .bdcs-search-form-submit:active,
.bdcs-search-form-submit.disabled.active,
.bdcs-search-form-submit[disabled].active,
fieldset[disabled] .bdcs-search-form-submit.active {
    background-color: #1abc9c;
    border-color: #1abc9c;
}

.bdcs-search-form-input {
    border: 2px solid #bdc3c7;
    color: #34495e;
    font-family: "Lato", Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.467;
    padding: 8px 12px;
    height: 42px;
    -webkit-appearance: none;
    border-radius: 6px;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: border .25s linear, color .25s linear, background-color .25s linear;
    transition: border .25s linear, color .25s linear, background-color .25s linear;
    width: 100%;
}

.bdcs-search-form-input:focus {
    border-color: #1abc9c;
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.bdcs-search-form-input[disabled],
.bdcs-search-form-input[readonly],
fieldset[disabled] .bdcs-search-form-input {
    background-color: #f4f6f6;
    border-color: #d5dbdb;
    color: #d5dbdb;
    cursor: default;
    opacity: 0.7;
    filter: alpha(opacity=70);
}

.bdcs-search-form-input.flat {
    border-color: transparent;
}

.bdcs-search-form-input.flat:hover {
    border-color: #bdc3c7;
}

.bdcs-search-form-input.flat:focus {
    border-color: #1abc9c;
}