好多网站的搜索输入框设计的很漂亮,接下来笔者将逐步介绍如何设置自己的搜索输入框.

设计效果图:

该效果主要采用CSS样式与Javascript进行实现.不得不说CSS样式功能很强大,而且效果很炫,笔者推荐一本书叫《CSS禅意花园》,你可以从中感悟CSS的唯美之处.

我们分步来介绍如何实现.

第一步：如何实现带提示信息的输入框

我们知道输入框在html中使用标签定义,针对输入框我们常用的事件为触焦,和脱焦.

我们从其它网站这块应用可以看出,当输入框获得焦点时提示信息就消失了,当输入框失去焦点时输入框中的提示信息就出现了.

所以我们只需要对不同的事件,添加不同的CSS样式,效果就可以完成了.

代码如下:

复制代码代码如下:

焦点事件特效-搜索框

.init{

color:gray;

/*font-style:italic;*/

width:200px;

}

.highlight{

color:black;

/*font-style:normal;*/

width:200px;

}

function txt_onfocus(tag){

if(tag.value==tag.defaultValue){

tag.value='';

tag.className='highlight';

}

}

function txt_onblur(tag){

if(tag.value==''){

tag.value=tag.defaultValue;

tag.className='init';

}

}

效果图如下:

接下来我们在这个基础上进行更完美的设计.

第二步:设计带选项的检索框

先写好HTML页面如下,进行相关数据展示,然后再进行CSS样式进行布局

复制代码代码如下:

焦点事件特效-搜索框

效果图如下:

很丑吧,的确很丑,如果我们看到的那些网站去掉CSS样式,就一个词形容：惨不忍睹.

接下来我们用CSS进行布局,样式设计.CSS代码如下:

复制代码代码如下:

body, button, input, select, textarea {

font: 12px/1.6 Verdana, Helvetica, sans-serif;

}

.searchdiv{

height:38px;

padding:8px 0 0 0;

background:#ffba00;

border-top:1px solid #3e3e3e;

border-bottom:1px solid #3e3e3e;

text-align:center

}

/*.footerSearch .searchBar{margin:0 auto;}*/

.searchTool{

width:360px;

height:32px;

line-height:32px;

margin:0px auto 0 auto;

text-align:left;

background:#fff;

}

.choose{

float:left;

cursor:pointer;

height:32px;

width:52px;

display:inline-block;

position:relative;

line-height:32px;

font-size:12px;

text-align:center;

padding-right:10px;

}

/*下拉箭头样式*/

.choose b{

position:absolute;

right:8px;

top:14px;

width:0;

height:0;

border-width:4px 4px;

border-style:solid;

border-color:#868686 #fff #fff;

font-size:0;line-height:0;

}

.searchTextInit{

height:32px;

line-height:32px;

border:0;

border-left:1px solid #eca128;

padding:0 8px;

font-size:12px;

color:#333;

color:gray;

width:250px;

background:#fff;

float:left

}

.searchTextInput{

height:32px;

line-height:32px;

border:0;

border-left:1px solid #eca128;

padding:0 8px; /*上 右 下 左*/

font-size:12px;

color:black;

width:250px;

background:#fff;

float:left

}

.searchBtn{

float:left;

height:24px;

width:24px;

background:#fff

url(images/bs.png) no-repeat center 0px;

cursor:pointer;

border:0;

margin:4px 0 0 4px;

}

.searchBtn:hover{

background:#fff url(images/bs.png)

no-repeat center -24px;

}

.choose ul{

border-bottom:1px solid #eca128;

list-style:none;

width:64px;

padding:0px;

}

.choose:hover b{border-color:#868686 #fff #fff;}

.choose:hover .choosePop{

display:inline-block;

}

.choosePop{

display:none;

width:64px;

position:absolute;

left:-1px;

top:20px;

}

/*鼠标离开列表上效果*/

.choosePop ul li a:link,.choosePop ul li a:visited{

color:#666;

background:#fff;

}

/*鼠标移动到列表上效果*/

.choosePop ul li a:hover,.choosePop ul li a:active{

color:#2d2d2d;

background:#ffba00;

}

.choosePop ul li{

border-left:1px solid #eca128;

border-right:1px solid #eca128;

line-height:24px;

}

.choosePop ul li a{

display:block;

font-size:12px;

text-decoration:none;

}

这下我们看一下效果

第三步:整合并完善效果

然后将第一步的效果进行整合.即可得到效果图所示的漂亮的检索框了.