HTML怎么实现文本框里加入一个提交按钮
就像这样,有一个文本输入框,最后面有一个搜索的按钮,可以提交,是怎么实现让那个小按钮在输入框里面的?...
就像这样,有一个文本输入框,最后面有一个搜索的按钮,可以提交,是怎么实现让那个小按钮在输入框里面的?
展开
6个回答
展开全部
可以用定位来做啊,
style:
.search { position:relative; width: 462px; }
.search .searchText { border: 1px solid #ddd; width: 346px; line-height: 32px; height: 32px; padding: 0 5px; color: #333; }
.search .searchButton { position:absolute; right:50px; background: url(../images/sliced.gif) -251px 0 no-repeat; width: 80px; height: 32px; text-indent: -9999px; border:none; }
html:
<div class="search fl">
<form action="#">
<input class="searchText" type="text" value="请输入搜索关键字" onfocus="if(this.value=='请输入搜索关键字')this.value=''" onblur="if(this.value=='')this.value='请输入搜索关键字'"/>
<input class="searchButton" type="button" value="搜索" />
</form>
<div class="clear"></div>
</div>
style:
.search { position:relative; width: 462px; }
.search .searchText { border: 1px solid #ddd; width: 346px; line-height: 32px; height: 32px; padding: 0 5px; color: #333; }
.search .searchButton { position:absolute; right:50px; background: url(../images/sliced.gif) -251px 0 no-repeat; width: 80px; height: 32px; text-indent: -9999px; border:none; }
html:
<div class="search fl">
<form action="#">
<input class="searchText" type="text" value="请输入搜索关键字" onfocus="if(this.value=='请输入搜索关键字')this.value=''" onblur="if(this.value=='')this.value='请输入搜索关键字'"/>
<input class="searchButton" type="button" value="搜索" />
</form>
<div class="clear"></div>
</div>
展开全部
可以用定位来做!将提交按钮定位到你想要的任意的位置!
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
<div>
<form action="" method="get">
<input style="border:1px solid red;background:none;float:left;width:150px;height:30px;border-right:0px solid red;" type="text" name="hkl" value="">
<input type="submit" value="确认" style="margin-left:0px;border-left:0px solid red;border:1px solid red;float:left;width:50px;height:30px;">
</form>
</div>
你可以看看这个的效果,在谷歌浏览器能正常显示
<form action="" method="get">
<input style="border:1px solid red;background:none;float:left;width:150px;height:30px;border-right:0px solid red;" type="text" name="hkl" value="">
<input type="submit" value="确认" style="margin-left:0px;border-left:0px solid red;border:1px solid red;float:left;width:50px;height:30px;">
</form>
</div>
你可以看看这个的效果,在谷歌浏览器能正常显示
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
<div style="边框">
<input style="border:none;background:none;" type="text">
<button type="subim" style="background:url(图片地址)></button>
</div>
自己调整三个之间的距离等细节。
<input style="border:none;background:none;" type="text">
<button type="subim" style="background:url(图片地址)></button>
</div>
自己调整三个之间的距离等细节。
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
这应该是个div 或者图 , 放大镜的图标 定位下 触发事件
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询