本篇文章给大家介绍一种好看的css搜索框样式，希望对感兴趣的朋友有所帮助。
css搜索框样式代码具体示例如下：
<div class="search bar"> <form> <input placeholder="css搜索框代码测试" name="cname" type="text"> <button type="submit"></button> </form></div>
style样式代码如下：
* { box-sizing:border-box;}div.search { padding:10px 0;}form { position:relative; width:300px; margin:0 auto;}input,button { border:none; outline:none;}input { width:100%; height:42px; padding-left:13px;}button { height:42px; width:42px; cursor:pointer; position:absolute;} .bar input { border:2px solid #c5464a; border-radius:5px; background:transparent; top:0; right:0;}.bar button { background:#c5464a; border-radius:0 5px 5px 0; width:60px; top:0; right:0;}.bar button:before { content:"搜索"; font-size:13px; color:#f9f0da;}
以上搜索框css代码测试效果如下图：
注：
所有主流浏览器都支持 bb9345e55eb71822850ff156dfde57c8 标签。
d5fd7aea971a85678ba271703566ebfd 标签用于搜集用户信息。根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
bb9345e55eb71822850ff156dfde57c8 标签定义一个按钮。在 button 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。
如果在 html 表单中使用 button 元素，不同的浏览器会提交不同的值。internet explorer 将提交 bb9345e55eb71822850ff156dfde57c8 与 de935b9c153fbe5d6ad7df96bd65d7b8 之间的文本，而其他浏览器将提交 value 属性的内容。请在 html 表单中使用 input 元素来创建按钮。
【相关文章推荐】
css制作好看的搜索框
html实现移动端固定悬浮半透明搜索框
分享8款css3搜索框
以上就是css怎么做出好看的搜索框样式？（代码示例）的详细内容。