HTML搜索栏的代码怎么写
导读：本文共1262字符，通常情况下阅读需要4分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要： 1. 简书类 实现效果 html代码<divclass="container"><formaction=""class="parent"><inputtype="text"class="search"pl... ...
音频解说
目录
(为您整理了一些要点),点击可以直达。1. 简书类
实现效果
html代码
<divclass="container"><formaction=""class="parent"><inputtype="text"class="search"placeholder="搜索"><inputtype="button"name=""id=""class="btn"></form></div>
css代码
*{margin:0;padding:0;}.container{height:70px;width:800px;margin:100pxauto0auto;}.parent{position:relative;}.search{width:300px;height:40px;border-radius:18px;outline:none;border:1pxsolid#ccc;padding-left:20px;position:absolute;}.btn{height:35px;width:35px;position:absolute;background:url("images/topbar.png")no-repeat-2px-99px;top:6px;left:285px;border:none;outline:none;cursor:pointer;}2. 百度类
实现效果
html代码
<divclass="container"><formaction=""class="parent"><inputtype="text"><inputtype="button"value="百度一下"></form></div>
css代码
重点：
1.当input框foucus时，border颜色改变，而不是保留outline
2.button按钮默认box-sizing: border-box
.container{width:500px;height:50px;margin:100pxauto;}.parent{width:100%;height:42px;top:4px;position:relative;}.parent>input:first-of-type{/*输入框高度设置为40px,border占据2px，总高度为42px*/width:380px;height:40px;border:1pxsolid#ccc;font-size:16px;outline:none;}.parent>input:first-of-type:focus{border:1pxsolid#317ef3;padding-left:10px;}.parent>input:last-of-type{/*button按钮border并不占据外围大小，设置高度42px*/width:100px;height:44px;position:absolute;background:#317ef3;border:1pxsolid#317ef3;color:#fff;font-size:16px;outline:none;} </div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">本文：
HTML搜索栏的代码怎么写的详细内容，希望对您有所帮助，信息来源于网络。