本文摘自PHP中文网,作者藏色散人,侵删。
css实现搜索框的方法:首先组织页面结构;然后使用placeholder来进行文本框注释;接着设置搜索按钮;最后重置页面的默认外边距与内边距,并设置搜索框的外边框样式即可。
本文操作环境:windows7系统、HTML5&&CSS3版、Dell G3电脑。
css搜索框怎么写?
使用p+css实现如图所示搜索框效果:
分析:
1.使用markman对原图进行宽度、高度、颜色等方面的分析,如下图:
2.分析元素:
该搜索框主要构成:input文本框、button按钮、按钮左侧一个三角形的指示符号;
实现:
1 2 3 4 5 6 7 8 | <form action= "" >
<p class = "form" >
<input type= "text" name= "uname" placeholder= "Search here..." >
<button>SEARCH
<span class = "t" ></span>
</button>
</p>
</form>
|
- 文本框,使用placeholder来进行文本框注释:
1 | <input type= "text" name= "uname" placeholder= "Search here..." >
|
- 三角形指示符号:从示例图上看这个三角形符号是与按钮融合的,因此我们初步确定将它做为按钮内部元素,使用定位的方式来实现
1 2 3 | <button>SEARCH
<span class = "t" ></span>
</button>
|
1 2 3 4 | *{
margin:auto;
padding:0;
}
|
1 2 3 4 5 6 7 8 | .form{
width: 454px;
height: 42px;
background:rgba(0,0,0,.2);
padding:15px;
border:none;
border-radius:5px;
}
|
设置搜索框的外边框样式,设置透明度,去掉外边框线,设置边框弧度:
1 2 3 | background:rgba(0,0,0,.2);
border:none;
border-radius:5px;
|
1 2 3 4 5 6 7 8 9 10 | 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;
}
|
边框弧度也可简写成:
1 | border-radius:5px 0 0 5px;
|
设置字体样式:
还有其他属性值:
属性值 | 描述 |
---|
normal | 默认值。浏览器显示一个标准的字体样式。 |
italic | 浏览器会显示一个斜体的字体样式。 |
oblique | 浏览器会显示一个倾斜的字体样式。 |
inherit | 规定应该从父元素继承字体样式。 |
1 2 3 4 5 6 7 8 9 | button{
width:112px;
height: 42px;
background-color:#d93c3c;
color:#fff;
border:none;
border-radius:0 5px 5px 0;
position: relative;
}
|
注意,这里使用了相对定位:
作用是用来帮助指示三角形的位置;
1 2 3 4 5 6 7 | .t{
border-width:6px;
border-style:solid;
border-color: transparent #d93c3c transparent transparent;
position: absolute;
right:100%;
}
|
这个元素使用绝对定位,将其的y坐标从右往左的参考元素的100%边框位置上,x坐标不设置,则默认为0:
1 2 | position: absolute;
right:100%;
|
制作三角形指示符号的步骤:
1 | <span class = "triangle" ></span>
|
1 2 3 4 5 6 | .triangle {
display: inline-block;
border-width: 100px;
border-style: solid;
border-color: #000 #f00 #0f0 #00f;
}
|
border-color 四个值依次表示上、右、下、左四个边框的颜色。
【推荐学习:css视频教程】
- 需要哪个方向的三角形,就将其他3个三角形设为透明即可
1 | border-color: #000 transparent transparent transparent;
|
不使用span,使用伪类直接定位三角形的位置,则在删除掉三角形的span元素和样式,直接在按钮元素的样式上增加before,完整代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | <!DOCTYPE html>
<html lang= "en" >
<head>
<meta charset= "UTF-8" >
<title>Document</title>
<style>
*{
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{
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%;
}
</style>
</head>
<body>
<form action= "" >
<p class = "form" >
<input type= "text" name= "uname" placeholder= "Search here..." ><button>SEARCH</button>
</p>
</form>
</body>
</html>
|
以上就是css搜索框怎么写的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
如何使用css来画一个棒棒糖
css中submit意思是什么
css怎么设置变成小手
css hr是什么意思
css/html如何设置readonly
css如何增加权重
css怎么把文字居中
css中focus选择器有什么用
eclipse css中文乱码怎么办
《css权威指南》怎么样
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » css搜索框怎么写