html上下输入框合并,如何合并HTML输入框和按钮？ （附样本图像）

最简单的方法是将整个文本字段包装，从左侧的图标到右侧的按钮，一个div，一个图像。

然后把一个文本框放在那个包装盒里，并且有一个像30px一样的页边空白;

然后把一个div放在位于右侧的包装中，并为它添加一个点击监听器。

HTML：

CSS：

#search_wrapper{

background-image:url('/path/to/your/sprite.gif');

width:400px;

height:40px;

position:relative;

}

#search_field {

margin-left:40px;

background-transparent;

height:40px;

width:250px;

}

#search_button {

position:absolute;

top:0;

right:0;

width:80px;

height:40px;

}

JQuery的：

$(function(){

// Click to submit search form

$('#search_button').click(function(){

//submit form here

});

// Fade out default text

$('#search_field').focus(function(){

if($(this).val() == 'Search items...')

{

$(this).animate({

opacity:0

},200,function(){

$(this).val('').css('opacity',1);

});

}

});

});