css实现搜索框的方法：首先组织页面结构；然后使用placeholder来进行文本框注释；接着设置搜索按钮；最后重置页面的默认外边距与内边距，并设置搜索框的外边框样式即可。
本文操作环境：windows7系统、HTML5&&CSS3版、Dell G3电脑。
css搜索框怎么写？
使用p+css实现如图所示搜索框效果：
立即学习“前端免费学习笔记（深入）”；
分析：
1.使用markman对原图进行宽度、高度、颜色等方面的分析，如下图：
2.分析元素：
该搜索框主要构成：input文本框、button按钮、按钮左侧一个三角形的指示符号；
实现：
先组织页面结构：
文本框,使用placeholder来进行文本框注释：
搜索按钮：
三角形指示符号：从示例图上看这个三角形符号是与按钮融合的，因此我们初步确定将它做为按钮内部元素，使用定位的方式来实现
样式设计：先重置页面的默认外边距与内边距：
*{ margin:auto; padding:0; }
设置类form的样式：
.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输入框的样式：
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%;
制作三角形指示符号的步骤：
定义三角的span元素：
制作四色边框:
.triangle { display: inline-block; border-width: 100px; border-style: solid; border-color: #000 #f00 #0f0 #00f;}
border-color 四个值依次表示上、右、下、左四个边框的颜色。
【推荐学习：css视频教程】
需要哪个方向的三角形，就将其他3个三角形设为透明即可
border-color: #000 transparent transparent transparent;
不使用span，使用伪类直接定位三角形的位置，则在删除掉三角形的span元素和样式，直接在按钮元素的样式上增加before，完整代码如下：
Document *{ margin:auto; padding:0; } .form{ width: 454px; height: 42px; background:rgba(0,0,0,.2); padding:15px; 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; } button{ /*display:inline-block;*/ width:112px; height: 42px; background-color:#d93c3c; color:#fff; border:none; border-top-right-radius:5px; border-bottom-right-radius:5px; position: relative; font-size:16px; font-weight: bold; } /*使用伪类来添加三角符号*/ button:before{ content:""; border-width:6px; border-style:solid; border-color: transparent #d93c3c transparent transparent; position: absolute; right:100%; top:38%; }
以上就是css搜索框怎么写的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1621193.html
微信扫一扫 
支付宝扫一扫 
