这篇文章将为大家详细讲解有关css搜索框如何实现，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
建网站原本是网站策划师、网络程序员、网页设计师等，应用各种网络程序开发技术和网页设计技术配合操作的协同工作。成都创新互联公司专业提供成都网站建设、成都网站设计,网页设计,网站制作(企业站、响应式网站建设、电商门户网站)等服务,从网站深度策划、搜索引擎友好度优化到用户体验的提升,我们力求做到极致!
css实现搜索框的方法：首先组织页面结构；然后使用placeholder来进行文本框注释；接着设置搜索按钮；最后重置页面的默认外边距与内边距，并设置搜索框的外边框样式即可。
本文操作环境：windows7系统、HTML5&&CSS3版、Dell G3电脑。
css搜索框怎么写？
使用p+css实现如图所示搜索框效果：
分析：
1.使用markman对原图进行宽度、高度、颜色等方面的分析，如下图：
2.分析元素：
该搜索框主要构成：input文本框、button按钮、按钮左侧一个三角形的指示符号；
实现：
*{
margin:auto;
padding:0;
} .form{
width: 454px;
height: 42px;
background:rgba(0,0,0,.2);
padding:15px;
border:none;
border-radius:5px;
}设置搜索框的外边框样式，设置透明度,去掉外边框线，设置边框弧度：
background:rgba(0,0,0,.2);
border:none;
border-radius:5px;
input{
width: 342px;
height: 42px;
background-color: #eeeeee;
border:none;
border-top-left-radius:5px;
border-bottom-left-radius:5px;
font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma';
font-style:italic;
}边框弧度也可简写成：
border-radius:5px 0 0 5px;
设置字体样式：
style-style:italic
还有其他属性值：
| 属性值 | 描述 | | normal | 默认值。浏览器显示一个标准的字体样式。 |
| italic | 浏览器会显示一个斜体的字体样式。 |
| oblique | 浏览器会显示一个倾斜的字体样式。 |
| inherit | 规定应该从父元素继承字体样式。 |
button{
width:112px;
height: 42px;
background-color:#d93c3c;
color:#fff;
border:none;
border-radius:0 5px 5px 0;
position: relative;
}注意，这里使用了相对定位：
position: relative;
作用是用来帮助指示三角形的位置;
.t{
border-width:6px;
border-style:solid;
border-color: transparent #d93c3c transparent transparent;
position: absolute;
right:100%;
}这个元素使用绝对定位，将其的y坐标从右往左的参考元素的100%边框位置上,x坐标不设置，则默认为0：
position: absolute;
right:100%;
制作三角形指示符号的步骤：
.triangle {
display: inline-block;
border-width: 100px;
border-style: solid;
border-color: #000 #f00 #0f0 #00f;
}border-color 四个值依次表示上、右、下、左四个边框的颜色。
border-color: #000 transparent transparent transparent;
不使用span，使用伪类直接定位三角形的位置，则在删除掉三角形的span元素和样式，直接在按钮元素的样式上增加before，完整代码如下：
Document
