如何修正博客搜索框页面元素的搜索结果颜色，以符合博客色彩搭配

以我的叶落尘天为例，因为是使用的黑色背景，所以默认添加此搜索框页面元素的话，搜索结果里的简要会是黑字，和黑色背景融为一体，根本看不清楚....更别提丑陋的链接颜色等等了...

下面给大家提供一个简单的修改方法：
首先，添加完搜索框页面元素后，切换到模板选项的修改HTML子项目，给代码框右上角的扩展窗口小部件模板前的小方框打上勾。

接着找到你刚刚添加的搜索框页面元素代码，即类似下面这样的代码：>b:widget id='CustomSearch1' locked='false' title='搜索此博客' type='CustomSearch'<
>b:includable id='main'<
>!-- only display title if it's non-empty --<
>b:if cond='data:title != ""'<
>h2 class='title'<>data:title/<>/h2<
>/b:if<

>div class='widget-content' style='width:95%'<
>div expr:id='data:widget.instanceId + "_form"'<
>span class='cse-status'<>data:loadingMsg/<>/span<
>/div<
>/div<

>!-- override gsearch.css --<
>style type='text/css'<
#uds-searchControl .gs-result .gs-title,
#uds-searchControl .gs-result .gs-title *,
#uds-searchControl .gsc-results .gsc-trailing-more-results,
#uds-searchControl .gsc-results .gsc-trailing-more-results * {
color:>data:linkColor/<;
}

#uds-searchControl .gs-result .gs-title a:visited,
#uds-searchControl .gs-result .gs-title a:visited * {
color:>data:visitedLinkColor/<;
}

#uds-searchControl .gs-relativePublishedDate,
#uds-searchControl .gs-publishedDate {
color:>data:dateColor/<;
}

#uds-searchControl .gs-result a.gs-visibleUrl,
#uds-searchControl .gs-result .gs-visibleUrl {
color:>data:urlColor/<;
}

#uds-searchControl .gsc-results {
border-color:>data:borderColor/<;
}

#uds-searchControl .gsc-tabhActive {
border-color:>data:borderColor/<;
border-top-color:>data:activeBorderColor/<;
background-color:>data:backgroundColor/<;
color:>data:textColor/<;
}

#uds-searchControl .gsc-tabhInactive {
border-color:>data:borderColor/<;
background-color:transparent;
color:>data:linkColor/<;
}
>/style<

>b:include name='quickedit'/<
>/b:includable<
>/b:widget<

注意 >style type='text/css'<和 >/style<之间部分的代码即是我们要修改的CSS部分，能够定义搜索结果框的样式颜色，我们这里只讨论颜色。

即只需要修改每一项后面的color:*******;部分即可。

上面代码第一个color:>data:linkColor/<;代表的是搜索结果的标题部分，如我的叶落尘天即修改为color:#ACFFFF;，#ACFFFF在CSS里代表青蓝色。具体各种颜色请大家自己找方便的CSS颜色调配器测试。我个人用的一款比较简易的：http://ggoovv.googlepages.com/CSS-Designer.htm

第二个color:>data:visitedLinkColor/<;是选择的要搜索类的标题如THIS BLOG的颜色。

第三个color:>data:dateColor/<;是搜索结果的日期的颜色。

第四个color:>data:urlColor/<;是定义搜索结果的相关页面链接的颜色，例如我的叶落尘天用的深绿色，改成了color:#00C45B;

第五个border-color:>data:borderColor/<;是定义搜索结果下边框的颜色，例如我的叶落尘天用的银灰色，即改成 border-color:#b0b0b0;

第六个代码块有四个颜色代码：
#uds-searchControl .gsc-tabhActive {
border-color:>data:borderColor/<;
border-top-color:>data:activeBorderColor/<;
background-color:>data:backgroundColor/<;
color:>data:textColor/<;
}
从上至下分别代表你选中的搜索类结果的边框颜色，边框顶部的加重色，边框背景色，搜索大类的文字颜色。这里的搜索类是指添加模块时可以选择的搜索本博客this blog,博客链接Linked From Here等的选项颜色定义。

第七块颜色跟第六块相反，是定义你没有选中的搜索类结果的颜色。

对了，上面七块代码似乎唯独没有定义搜索结果里简要片段文字的颜色，像我叶落尘天那样不就一片黑了吗？也太丑了吧？

别慌，还有第八块可以添加的代码如下：

#uds-searchControl .gs-result .gs-snippet {
color:#f2f2f2;
}

修改color:#f2f2f2;，把#f2f2f2代表的灰白色改成你想要的任意颜色吧～～～