html做一个html搜索框功能实现，实现对本地目标文件夹里的文件进行检索，然后把目标文件里的具体内容展示到新窗口上

来源：蜘蛛抓取(WebSpider) 时间：2020-02-09 10:45 标签： html搜索框功能实现

给大家分享一下前端用处很多的帶小图标的html搜索框功能实现的制作方法


1、搜索图像用绝对定位放到html搜索框功能实现的上方
2、input框设置文本缩进，大小为搜索图像大小加上圖像左右两边的外边距

只需一个搜索图标图片类似于下图

 

 
 
//存值方法,新的值添加在首位
//存值方法,新的值添加在首位

发布了26 篇原创文章 · 获赞 11 · 访问量 7万+

版权声明：本文为博主原创文章遵循 版权协议，转载请附上原文出处链接和本声明

此搜索栏采用的是表单的一些标签，基本的代码如下： 

 

 因为涉及到了块元素所以input標签与select标签不能转行；

CSS3的基本代码如下： 

 
 

 做这种东西，最重要的是头脑清晰条理分明，按部就班的来不能急。
  • 按由外到内的顺序先設置div整体为绝对位置进行移动；然后可以对html搜索框功能实现内的placeholder设置字体、位置等细节，最重要的是将其整体input设置为块元素顶部对齐；
  • 茬这里，我清除了select默认的设置并对其进行个性化，加上-moz-appearance:、-webkit-appearance:这些是因为这些像火狐等的浏览器对select都有默认的样式修饰然后给个背景图，height嘟设置成一样的select::-ms-expand写不写没太大影响；
  • 确定提交框，要想达到很好的视觉和触觉效果是比较不容易的鼠标指向时要有鼠标样式的变化，提交框边界也得有点击的时候要有凹陷，释放的时候要有回弹等大部分都可以用颜色变化和边界样式搞定在这里就不一一细说啦！

发咘了27 篇原创文章 · 获赞 25 · 访问量 3万+

我要回帖

更多关于 html搜索框功能实现 的文章

 

随机推荐