本文操作环境：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
<button>SEARCH</button>
登录后复制- 三角形指示符号：从示例图上看这个三角形符号是与按钮融合的，因此我们初步确定将它做为按钮内部元素，使用定位的方式来实现
复制代码1
2
3
<button>SEARCH
<span class="t"></span>
</button>
登录后复制- 样式设计：
- 先重置页面的默认外边距与内边距：
复制代码1
2
3
4
*{
margin:auto;
padding:0;
}
登录后复制- 设置类form的样式：
复制代码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;
登录后复制- 设置input输入框的样式：
复制代码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;
登录后复制设置字体样式：
复制代码1
style-style:italic
登录后复制还有其他属性值：
| 属性值 | 描述 |
|---|---|
| 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
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%;
登录后复制制作三角形指示符号的步骤：
- 定义三角的span元素：
复制代码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{
/*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%;
}
</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搜索框怎么写内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复