做一个input搜索框

首先我先抛出制作这个搜索框的细节:

1)文本输入框要有内阴影。

2)文本框与按钮要对齐。

好,我们现在开始制作,先说一下,最直接的制作方法,文本输入框的内阴影我们可以用图片来做,用几像素的图片平铺,然后一个DIV层内包含input与button两个标签,大致HTML标签书写如:


1

2

3

4

5

6

<div id="search-field">

<form id="search-form">

    <input type="text" />

    <button type="submit">谷歌搜索</button>

</form>

</div>

这样写虽然实现了想要的效果,但是我们会发现,在IE浏览器下,input与button始终会有1像素的错位,如图:

如果我们要达到满意的效果,就要用到各IE浏览器的hack,造成我们将来维护成本的加大,并且,如果阴影用图片的话,像这样的小图会越来越多,如果用CSS3来实现内阴影,我们的PM肯定会跑来和我们说,你看浏览器的表现不一致,有的有阴影,有的没有,你要是说我们只有高浏览器支持阴影,低版本浏览器不支持阴影,我们的PM会说,我们要的是全浏览器保持一致,坑爹呀,为什么就这么执着呢?不过要求严格,才能使我们进步嘛!

那我们就使用另一个方法来实现,首先,我们的文本框用一个DIV来模拟,然后将input的边框与背景都设置为none,这样就不会出现错位的现象了;接着我们就来处理文本框的内阴影,我们用两个DIV来控制,一般像这样的阴影基本上2像素就能达到效果了,所以我们将X轴的DIV设置上border与下border,Y轴的DIV设置左border与右border,然后定位到用于模拟input的层内,一个完美的input框就制作完成了,阴影CSS代码如下:


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

.search-field .shadow-x{

   position:absolute;

   top:0;

   left:1px;

   width:438px;

   height:0;

   border-top:1px solid #d0d0d0;

   border-bottom:1px solid #f0f0f0;

   overflow:hidden;

   z-index:1;

}

.search-field .shadow-y{

   position:absolute;

   top:0;

   left:0;

   width:0;

   height:30px;

   border-left:1px solid #d0d0d0;

   border-right:1px solid #f0f0f0;

   overflow:hidden;

}

阴影HTML代码如下:


1

2

3

4

5

6

7

8

9

<div id="search-field">

<form id="search-form">

<div class="search-input">

    <div class="shadow-x"></div>

    <div class="shadow-y"></div>

    <input type="text" />

</div>

<button type="submit">谷歌搜索</button>

</div>

完成后,这个搜索框在视觉上与我们想要的效果一般无二。

时间: 2024-10-26 06:04:48

做一个input搜索框的相关文章

JS,JQ及时监听input值的变化,MUI的input搜索框里的清除按钮的点击监听事件

JS: document.getElementById("input对象的ID").addEventListener('input',function(){ console.log("aaaaa"); }); JQ: $("input对象").bind("input  propertychange",function(){ console.log("aaaaa"); }): MUI 清除按钮的点击的监听:

设计input搜索框提示文字点击消失的效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

jquery连接html页面做一个弹出框输入

开发中遇到一个功能金额满10000元会弹出一个身份验证,前端jq实现代码: art.dialog.open('html页面连接地址',{    title: '身份验证',    cancelVal: '关闭',    okVal: '提交',    width: '500px',    height: '200px',    lock: true,    fixed: true,    drag: false,    ok: function (iframeWin,topWin) {     

搜索框 - div中input自适应

当需要开发如上这样一个搜索框时. 因为是移动端开发,手机屏幕宽度的不确定性,所以不能使用平时的定宽开发. 分析如上图: 1.该搜索框由两部分组成:input搜索框+取消按钮: 2.搜索框距离左右两边的距离是固定的,即图中1和2相等: 3.取消按钮的大小是固定的,以及距离input距离是固定的: 4.input随着屏幕宽度的变化自适应变化. 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8&quo

Android 依据EditText搜索框ListView动态显示数据

依据EditText搜索框ListView动态显示数据是依据需求来的,认为这之中涉及的东西可能比較的有意思,所以动手来写一写.希望对大家有点帮助. 首先.我们来分析下整个过程: 1.建立一个layout,包括一个EditText搜索框和一个ListView 2.创建一个数据集mData,用于ListView的Adapter的创建 3.加入EditText的文本改变的监听器 4.利用notifyDataSetChanged()动态更新ListView 第一步:创建一个搜索框 这个还是比較easy的

Android 根据EditText搜索框ListView动态显示数据

根据EditText搜索框ListView动态显示数据是根据需求来的,觉得这之中涉及的东西可能比较的有意思,所以动手来写一写,希望对大家有点帮助. 首先,我们来分析下整个过程: 1.建立一个layout,包含一个EditText搜索框和一个ListView 2.创建一个数据集mData,用于ListView的Adapter的创建 3.添加EditText的文本改变的监听器 4.利用notifyDataSetChanged()动态更新ListView 第一步:创建一个搜索框 这个还是比较容易的,这

通过cookie实现搜索框内容保存关闭浏览器之前的操作、jq js实现方法

jq实现的方法: jq需要在页面中引入JQ.cookie插件 这是一个超轻量级插件 要实现的效果: 下面是jq代码: $(function(){ var til=$("#orderInfoContent");//获取到input搜索框 var vlue=$.cookie('plhder');//获取cookie值 til.attr('placeholder',vlue);//把获取到的cookie值attr到搜索框中 $("#orderInfoSelectIndex opti

Extjs combobox 实现搜索框的效果

目的:使用combobox实现一个类似搜索框的效果,即用户输入内容后,出现相关下列列表,提供选择. 实现:extjs3 中combobox自身带这个功能. 需要设置的属性: 1. hideTrigger: true, // 去掉右侧的小标志 2. mode : 'remote', // 数据需要远程下载 3. minChars:2, // 设置用户输入字符多少时触发查询 4. queryParam: 'userinput', // 设置用户传递参数的名称,默认是 ‘query’ store的定义

html中如何修改选中 用input做的搜索框 的边框颜色

html中如何修改选中 用input做的搜索框 的边框颜色 如图,当我鼠标选中输入框时,内边框会变成蓝色 我的问题是: 1.如何把蓝色去掉? 2.如何改成别的颜色? 首先感谢 UI设计师提出的需求,解决方法如下: 代码如下: input[type=text]:focus{ outline: none; // 如何把蓝色去掉? border: 1px solid #58b195; // 如何改成别的颜色?} 注意:input的type类型很多,type根据类型而定,也可以写成下面这种形式: inp