大佬教程收集整理的这篇文章主要介绍了html – 编码一个带有图标的搜索栏,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
<div class="search-wrapper"> <form action="search.php" method="get" name="search"> <div class="search-box"><img class="search-icon" src="images/search-icon.png" width="21" height="18" alt="search icon" /> <input name="seach" type="text" value="Search for dishes or restaurants" /> </div> <input class="submit-button" name="Go" type="submit" /> </form> </div> #search { height:125px; overflow:hidden; } .search-wrapper { width:465px; height:45px; BACkground-color:#f0f0f0; margin:43px auto 0; border:1px solid #e9e9e9; -moz-border-radius: 5px; /* FF1+ */ -webkit-border-radius: 5px; /* Saf3-4 */ border-radius: 5px; /* Opera 10.5,IE 9,Saf5,Chrome */ position:relative; } .search-box { width:375px; height:32px; BACkground-color:#fff; margin:5px 7px; border:1px solid #cfcfcf; -moz-border-radius: 5px; /* FF1+ */ -webkit-border-radius: 5px; /* Saf3-4 */ border-radius: 5px; /* Opera 10.5,Chrome */ position:relative; } .search-box img.search-icon { margin:8px 0 0 5px; } .search-box input { border:none; height:30px; width:332px; margin:0; position:absolute; font-size:16px; padding-left:5px; padding-right:5px; } input.submit-button { BACkground:url(../images/go-button.png) no-repeat; text-indent:-9999px; border:none; height:32px; width:68px; position:absolute; top:6px; left:390px; cursor:pointer; //right:15px; }
这里是代码@贴子bin:
图片:
以上是大佬教程为你收集整理的html – 编码一个带有图标的搜索栏全部内容,希望文章能够帮你解决html – 编码一个带有图标的搜索栏所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。