php搜索框代码,css怎么做出好看的搜索框样式？（代码示例）

本篇文章给大家介绍一种好看的css搜索框样式，希望对感兴趣的朋友有所帮助。

css搜索框样式代码具体示例如下：

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代码测试效果如下图：

注：

所有主流浏览器都支持 标签。

标签用于搜集用户信息。根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

标签定义一个按钮。在 button 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。

如果在 HTML 表单中使用 button

元素，不同的浏览器会提交不同的值。Internet Explorer 将提交 与

之间的文本，而其他浏览器将提交 value 属性的内容。请在 HTML 表单中使用 input 元素来创建按钮。

【相关文章推荐】