css – 搜索框内的搜索按钮,如Bing

前端之家收集整理的这篇文章主要介绍了css – 搜索框内的搜索按钮,如Bing前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如何在Bing等网站上看到搜索框内的搜索按钮?

解决方法

它只是看起来像在里面,但它不是(你不能把html放在输入中).

2个元素(输入和按钮)靠近在一起,边距为0,两者都具有相同的高度.按钮的图形具有3px白色边距.所以它创造了这种效果.

可能的标记和样式可能是:

<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 ... */
}
原文链接:https://www.f2er.com/css/216249.html

猜你在找的CSS相关文章