当前位置：文江博客话题详情

搜索框内的搜索按钮，如 Bing

发布于 2024-09-15 21:41:36 字数 106 浏览 5 评论 0原文

如何在搜索框中实现搜索按钮（如 Bing 等网站上所示）？

带有按钮图形的搜索框

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

过去的过去 2024-09-22 21:41:36

它看起来像是在里面，但事实并非如此（你不能将 html 放在输入中）。

这 2 个元素（一个输入和一个按钮）靠得很近，边距为 0，并且高度相同。该按钮的图形有 3 像素的白边距。所以就造成了这样的效果。

可能的标记和样式可以是：

<input type="text" id="q" />
<input type="button" id="b" value="Search" />


#q, #b { 
   margin: 0 
}
#q { 
   padding: 5px; 
   font-size: 2em; 
   line-height: 30px 
}
#b { 
   /* image replacement */
   text-indent: -99999px; 
   width: 30px; 
   height: 30px; 
   display: block;
   background: gray url(button.png) 0 0 no-repeat;

   /* placing next to input using float or absolute positioning omitted ... */
}

It just looks like it's inside but it's not (you cannot put html inside an input).

The 2 elements (an input and a button) are close together with 0 margin and both have the same height. The button's graphic has a 3px white margin. So it creates this effect.

A possible markup and styling could be:

<input type="text" id="q" />
<input type="button" id="b" value="Search" />


#q, #b { 
   margin: 0 
}
#q { 
   padding: 5px; 
   font-size: 2em; 
   line-height: 30px 
}
#b { 
   /* image replacement */
   text-indent: -99999px; 
   width: 30px; 
   height: 30px; 
   display: block;
   background: gray url(button.png) 0 0 no-repeat;

   /* placing next to input using float or absolute positioning omitted ... */
}

回复收藏 0 原文