html中百度效果的输入框,jquery实现类似百度的搜索input输入框

效果图：

CSS代码：

.searchbar{

margin: 10px 0;

width: 600px;

float: right;

height: 95px;

}

.search{

width:500px;

border: #cf0000 solid 2px;

height: 34px;

margin: 28px 0;

position: relative;

}

.search div{

float: left;

}

.searchSelect{

height: 34px;

font-size: 12px;

line-height: 34px;

width: 100px;

text-align: center;

border-right: #cf0000 solid 1px;

color: #666;

cursor: pointer;

}

.searchInput input{

height: 34px;

border: 0;

width: 330px;

padding: 0 10px;

}

.searchSubmit input{

border: 0;

height: 34px;

width: 69px;

background-color: #cf0000;

color: #fff;

font-size: 14px;

font-weight: bold;

cursor: pointer;

}

.selectItems{

position: absolute;

top: 34px;

left: -1px;

z-index: 999;

background-color: #f0f0f0;

width: 100px;

text-align: center;

border: #ccc solid 1px;

}

.selectItems ul{

list-style: none;

font-size: 12px;

}

.selectItems ul li{

height: 30px;

line-height: 30px;

color: #666;

cursor: pointer;

}

.selectItems ul li:hover{

color: #f60;

}

html代码部分：

萌宠资讯

• 萌宠资讯
• 萌宠百科
• 萌宠知道
• 萌宠社区

jquery代码部分：

$(document).ready(function(){

$(".selectItems").hide();

$(".searchSelect").click(function(event){

if($(".selectItems").hasClass('clickshow')){

$(".selectItems").removeClass('clickshow');

$(".selectItems").hide();

}else{

$(".selectItems").addClass('clickshow');

$(".selectItems").show();

}

event.stopPropagation();

});

$(".selectItems>ul>li").click(function(){

$(".searchSelect").empty();

$(".searchSelect").text($(this).html());

$(".selectItems").removeClass('clickshow');

$(".selectItems").hide();

});

$(window).click(function(){

if($(".selectItems").hasClass('clickshow')){

$(".selectItems").removeClass('clickshow');

$(".selectItems").hide();

}

});

});

仅供参考！