机器学习和生物信息学实验室联盟

标题: 怎么实现在文本搜索框里添加小放大镜？ [打印本页]

作者: hsc 时间: 2011-11-28 22:25
标题: 怎么实现在文本搜索框里添加小放大镜？
本帖最后由 hsc 于 2011-12-7 17:59 编辑

[attach]297[/attach]
看到这个图片里的搜索框是不是很炫呢，圆角先不管，邹老师发得一篇帖子里有答案了，这里就说一下怎么即加入一行字，又

在前边加入一个小放大镜，其实如果能够实现放大镜和字再点击之后能够同时实现消失，并在外边点击之后能够实现同步消失

和出现是最好的，但是理想总是美好的，这个功能我相信是可以实现的，但是我暂时还没有找到解决办法。

但是添加一个小放大镜不让他消失还是比较简单的，但是找到一个关键合适的放大镜图片是很关键的，这一个图片是我自己做

的，用着还算合适[attach]298[/attach]如果需要，可以下载来用。

其实关键的代码就一行，只需要设置文本框的背景图片就可以了，代码如下：

background:url(search.jpg) no-repeat left center; padding-left:25px;

添加padding-left属性是为了把字体往后移一点，这样不会和图片重合，下边代码是一个完整的文本框的代码，就是和论文检索

系统首页上的一样：

<input id="Title" type="text" value="请在这里输入搜索主题，不必填作者"
                     onfocus="javascript:if(this.value == '请在这里输入搜索主题，不必填作者'){this.value = ''; this.style.color='#000000';}else{this.style.color='#000000';}"
                     onblur="if(this.value==''){this.value='请在这里输入搜索主题，不必填作者';this.style.color='#A1A1A1';}else{this.style.color='#000000';}"
                     style="width: 400px; height:20px; color:#A1A1A1;background:url(search.jpg) no-repeat left center; padding-left:25px;" />

效果图为：[attach]290[/attach]

http://datamining.xmu.edu.cn:8080/paper/

作者: hsc 时间: 2011-11-28 22:30
我好郁闷，图片为什么一直显示不出来，如果谁想要图片，直接来我这拷好了，郁闷ing....

欢迎光临机器学习和生物信息学实验室联盟 (http://123.57.240.48/)