如何制作你的搜索框

来源:http://zsk.akaka.com.cn/2008/05/search-s...

如果你厌倦了 blog 页面里千篇一律的搜索框，那就跟随我下面的步骤，来制作你的搜索框，所做的只是修改 CSS 。

下面图片左边显示的是原来的搜索框，右边的图片修改后新的搜索框（主要是按钮修改）。

第1步：创建您的图片

挑选一张您喜欢的图片，最好是 jpg 格式的。你可以到 google 里搜搜看，然后将你选择的图片放入到您的主题的图像文件夹中。例如，我选了一张图片，取名叫 mag_glass.jpg ，然后放入主题文件夹的 /images/ 文件夹中。

第2步：添加一个小代码到您的 .php 文件中

这一步专门针对 Internet Explorer 的 CSS 规则，这一步是非常重要的，因为各种浏览器的 css 规则有差异。

将下面的代码加到 .php 文件中 body 开始行标注下面：

再将下面的代码加到 .php 文件中 body 结束行标注上面：

上面的目的是创建一个 IEroot 参数，如果用户使用的是 Internet Explorer ，就使用这个参数；如果用户使用的是其他浏览器（例如 Firefox ），就跳过这个参数。

这让我们接下来使用的 IEroot 参数只在浏览者使用 ie 时才会起作用。（更多的使用案例）

第3步：添加你的 CSS 代码

最后，我们添加必要的 CSS 代码到 style.css 文件里。

#search-block-form input.form-submit, #search-form input.form-submit {
height: 24px;
width: 24px;
cursor: pointer;
text-indent: -9999px;
border: none;
background: url(images/mag_glass.jpg) no-repeat left top;
}

这段代码大多数浏览器都能支持。它包括搜索框和搜索按钮（你需要的只是要根据你的 blog 改变高度/height 和宽度/width 的数值）。

加入代码后，在 firefox 中显示正常，可是在 ie 中有些错误：

而且如果在搜索的页面下， IE 会完全删除提交按钮：

因此，我们需要找到一个方法处理这些问题：

#IEroot .block-search input.form-submit, #IEroot #search-form input.form-submit {
width: 34px;
font-size: 0;
color: #fff;
text-align: right;
}
#IEroot #search-form .search-advanced input.form-submit {
width: 44px;
text-indent: 0;
}

写入上面那个 IEroot 代码（这个 IEroot 参数是针对 ie 的，第二步有说明），我们首先告诉 ie 让它把文字显示的非常小，size 为 0 (FIG 1)。不过，这样仍然不会完全删除文本，接下来我们再设定一个空间放图片【设定文字的 width 和 text align (FIG 2)】，最后设定文字的颜色与背景相同：