diy搜索框，简约风格！搜索指定版块的指定分类信息字段

    昨天自己摸索着做了一个diy的搜索框，是用来搜索自定义的版块帖子的。这里很感谢https://discuz.dismall.com/thread-2107833-1-1.html和https://discuz.dismall.com/thread-2814500-1-1.html的教程。实在按捺不住了就和大家分享分享！

    从这两个帖子中我意识到了所谓的搜索也只是一个表单，将其提交给一个程序而已，这个表单用来获取相关的参数值提交给这个程序。于是我坚定的相信自己diy是可以做出搜索条的。

    上面的两个帖子都是diy头部的搜索条，代码要嵌到文件中，G变量的调用在diy的自定义html中是不起作用的。于是我就想能不能换一种方法，并且我只是想实现搜索小说版块中的小说名称或作者的功能。联系到自带的搜索表单功能（前提是小说版块绑定了分类信息的，并且在后台开启了表单搜索），我copy了这个表单搜索的代码，不出意料是一个form表单，将其放到diy自定义html中依然可以显示良好，具有正常的功能。

    在现有代码的基础上，我修改了搜索条的样式，使其看上去更像一个搜索条，修改完后就如下图：

    怎么样？有点简约风的感觉吧？

    这个搜索条可以输入小说名称或者作者来搜索，点击输入框后提示文字会消失，移开后又会出现。这个是用javascript实现的，在网上学到的很简单的代码。最开始是通过改变value的值来实现这个效果，但是这样提交表单时就会将小说名称和作者作为value提交上去，导致搜索不出东西来。由于能力有限，最后只得通过改变输入框的background来实现这种效果。

    这里需要申明的一点是，图中小说搜索右侧向下的小箭头是从http://www.aibigbang.com/弄过来的，特向原作者表示谢意。

    还有一点想说的就是小说名称和作者两个输入框之间的斜线不是图片是用CSS做的，也是在网上找到的哦，呵呵，万能的度娘，爱死你了！

最后放上代码以及我的小站地址：SFNav科幻导航www.sfnav.com,大家可以参考修改，呵呵~

1. <style type="text/css">
   
2. .sfsearch { height:48px; width:455px; padding:8px 12px; background:#D5E5E5;}
   
3. .sfsearch .title { background:#F3F3F3 url(/myplugin/images/arrowdown.gif) 60px 13px no-repeat; float:left; height:30px; line-height:30px; width:75px; font-weight:normal;padding:0}
   
4. .sfsearch .title span { font-size:12px; padding-left:8px;}
   
5. .sfsearch .text { height:30px;line-height: 27px;vertical-align: middle; padding:0 0 0 8px; margin:0; float:left;overflow: hidden; border:0; color:#BBB;width: 135px;}
   
6. .sfsearch #sfsrcname {background:url(/myplugin/images/sfnamebg.png) no-repeat #FFF;}
   
7. .sfsearch #sfsrcauthor {background:url(/myplugin/images/sfauthorbg.png) no-repeat #EEE;}
   
8. .sfsearch .search { float:left;}
   
9. .sfsearch .search .srcbtn { width:75px; height:30px; line-height:30px;background:#61a2d9; margin:0; padding:0; border:0; color:#FFF; font-size:16px; cursor:pointer;}
   
10. .sfsearch .search .srcbtn:hover {background:#009ad9;}
    
11. .sftriangle{ display:block; height:0px; width:0px; border:15px solid #000; border-color:transparent #EEE #EEE transparent; border-style:dashed solid solid dashed; line-height:0px; margin:0 0 0 -30px; padding:0px; float:left;}
    
12. </style>
    
13. <div class="sfsearch">
    
14. <form method="post" autocomplete="off" name="searhsort" id="searhsort" class="bbs bm_c pns mfm cl" style="height:30px; width:100%;" action="forum.php?mod=forumdisplay&fid=49&filter=sortid&sortid=8">
    
15. <div class="title"><span>小说搜索</span></div>
    
16. <input type="hidden" name="formhash" value="0db3dcd4">
    
17. <input type="text" name="searchoption[15][value]" class="text" value="" onfocus="this.style.background='#FFF'" onBlur="if (value ==''){this.style.background='url(/myplugin/images/sfnamebg.png) no-repeat #FFF'}" id="sfsrcname"> <div class="sftriangle"></div>
    
18. <input type="text" name="searchoption[22][value]" class="text" value="" onfocus="this.style.background='#EEE'" onBlur="if (value ==''){this.style.background='url(/myplugin/images/sfauthorbg.png) no-repeat #EEE'}" id="sfsrcauthor">
    
19. <div class="search"><button type="submit" name="searchsortsubmit" class="srcbtn"><em style="font-style: normal;">搜索</em></button></div>
    
20. </form></div>

复制代码

做一个,做好了,请看

感谢ing

世上没有绝望的处境，只有对处境绝望的人。

昨天我梦见你了，真的，天空是那么明静，阳光是那么明媚，大海是那么一望无垠，你站在蔚蓝的海边，我拿小棍一捅你，嘿，这小王八，壳还挺硬。

宁死不屈.....

让我们和财富一起成长!!!

出差回来给她一个惊喜，并带上礼物。(想在这条上跟我开玩笑的朋友，请私下跟我开)

也有啊,前天不是你也到一个很狂的贴里去了吗?

真是汗啊  我的帖子好少啊  加油