<!DOCTYPE html>
<html
lang
=
"en"
>
<head>
<meta
charset
=
"UTF-8"
>
<meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
>
<title>
8款纯CSS3搜索框
</title>
<link
href
=
"http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css"
rel
=
"stylesheet"
>
<link
rel
=
"stylesheet"
href
=
"style.css"
>
<style>
*
{
box
-
sizing
:
border
-
box
;
}
body
{
margin
:
0
;
padding
:
0
;
background
:
#494A5F;
font
-
weight
:
500
;
font
-
family
:
"Microsoft YaHei"
,
"宋体"
,
"Segoe UI"
,
"Lucida Grande"
,
Helvetica
,
Arial
,
sans
-
serif
,
FreeSans
,
Arimo
;
}
#container {
width
:
500px
;
height
:
820px
;
margin
:
0
auto
;
}
div
.
search
{
padding
:
30px
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
;
}
/*搜索框1*/
.
bar1
{
background
:
#A3D0C3;}
.
bar1 input
{
border
:
2px
solid
#7BA7AB;
border
-
radius
:
5px
;
background
:
#F9F0DA;
color
:
#9E9C9C;
}
.
bar1 button
{
top
:
0
;
right
:
0
;
background
:
#7BA7AB;
border
-
radius
:
0
5px
5px
0
;
}
.
bar1 button
:
before
{
content
:
"\f002"
;
font
-
family
:
FontAwesome
;
font
-
size
:
16px
;
color
:
#F9F0DA;
}
/*搜索框2*/
.
bar2
{
background
:
#DABB52;}
.
bar2 input
,
.
bar2 button
{
border
-
radius
:
3px
;
}
.
bar2 input
{
background
:
#F9F0DA;
}
.
bar2 button
{
height
:
26px
;
width
:
26px
;
top
:
8px
;
right
:
8px
;
background
:
#F15B42;
}
.
bar2 button
:
before
{
content
:
"\f105"
;
font
-
family
:
FontAwesome
;
color
:
#F9F0DA;
font
-
size
:
20px
;
font
-
weight
:
bold
;
}
/*搜索框3*/
.
bar3
{
background
:
#F9F0DA;}
.
bar3 form
{
background
:
#A3D0C3;}
.
bar3 input
,
.
bar3 button
{
background
:
transparent
;
}
.
bar3 button
{
top
:
0
;
right
:
0
;
}
.
bar3 button
:
before
{
content
:
"\f002"
;
font
-
family
:
FontAwesome
;
font
-
size
:
16px
;
color
:
#F9F0DA;
}
/*搜索框4*/
.
bar4
{
background
:
#F15B42;}
.
bar4 form
{
background
:
#F9F0DA;
border
-
bottom
:
2px
solid
#BE290E;
}
.
bar4 input
,
.
bar4 button
{
background
:
transparent
;
}
.
bar4 button
{
top
:
0
;
right
:
0
;
}
.
bar4 button
:
before
{
content
:
"\f178"
;
font
-
family
:
FontAwesome
;
font
-
size
:
20px
;
color
:
#be290e;
}
/*搜索框5*/
.
bar5
{
background
:
#683B4D;}
.
bar5 input
,
.
bar5 button
{
background
:
transparent
;
}
.
bar5 input
{
border
:
2px
solid
#F9F0DA;
}
.
bar5 button
{
top
:
0
;
right
:
0
;
}
.
bar5 button
:
before
{
content
:
"\f002"
;
font
-
family
:
FontAwesome
;
font
-
size
:
16px
;
color
:
#F9F0DA;
}
.
bar5 input
:
focus
{
border
-
color
:
#311c24
}
/*搜索框6*/
.
bar6
{
background
:
#F9F0DA;}
.
bar6 input
{
border
:
2px
solid
#c5464a;
border
-
radius
:
5px
;
background
:
transparent
;
top
:
0
;
right
:
0
;
}
.
bar6 button
{
background
:
#c5464a;
border
-
radius
:
0
5px
5px
0
;
width
:
60px
;
top
:
0
;
right
:
0
;
}
.
bar6 button
:
before
{
content
:
"搜索"
;
font
-
size
:
13px
;
color
:
#F9F0DA;
}
/*搜索框7*/
.
bar7
{
background
:
#7BA7AB;}
.
bar7 form
{
height
:
42px
;
}
.
bar7 input
{
width
:
250px
;
border
-
radius
:
42px
;
border
:
2px
solid
#324B4E;
background
:
#F9F0DA;
transition
:
.
3s
linear
;
float
:
right
;
}
.
bar7 input
:
focus
{
width
:
300px
;
}
.
bar7 button
{
background
:
none
;
top
:
-
2px
;
right
:
0
;
}
.
bar7 button
:
before
{
content
:
"\f002"
;
font
-
family
:
FontAwesome
;
color
:
#324b4e;
}
/*搜索框8*/
.
bar8
{
background
:
#B46381;}
.
bar8 form
{
height
:
42px
;
}
.
bar8 input
{
width
:
0
;
padding
:
0
42px
0
15px
;
border
-
bottom
:
2px
solid transparent
;
background
:
transparent
;
transition
:
.
3s
linear
;
position
:
absolute
;
top
:
0
;
right
:
0
;
z
-
index
:
2
;
}
.
bar8 input
:
focus
{
width
:
300px
;
z
-
index
:
1
;
border
-
bottom
:
2px
solid
#F9F0DA;
}
.
bar8 button
{
background
:
#683B4D;
top
:
0
;
right
:
0
;
}
.
bar8 button
:
before
{
content
:
"\f002"
;
font
-
family
:
FontAwesome
;
font
-
size
:
16px
;
color
:
#F9F0DA;
}
</style>
</head>
<body>
<div
id
=
"container"
>
<div
class
=
"search bar1"
>
<form>
<input
type
=
"text"
placeholder
=
"请输入您要搜索的内容..."
>
<button
type
=
"submit"
></button>
</form>
</div>
<div
class
=
"search bar2"
>
<form>
<input
type
=
"text"
placeholder
=
"请输入您要搜索的内容..."
>
<button
type
=
"submit"
></button>
</form>
</div>
<div
class
=
"search bar3"
>
<form>
<input
type
=
"text"
placeholder
=
"请输入您要搜索的内容..."
>
<button
type
=
"submit"
></button>
</form>
</div>
<div
class
=
"search bar4"
>
<form>
<input
type
=
"text"
placeholder
=
"请输入您要搜索的内容..."
>
<button
type
=
"submit"
></button>
</form>
</div>
<div
class
=
"search bar5"
>
<form>
<input
type
=
"text"
placeholder
=
"请输入您要搜索的内容..."
>
<button
type
=
"submit"
></button>
</form>
</div>
<div
class
=
"search bar6"
>
<form>
<input
type
=
"text"
placeholder
=
"请输入您要搜索的内容..."
>
<button
type
=
"submit"
></button>
</form>
</div>
<div
class
=
"search bar7"
>
<form>
<input
type
=
"text"
placeholder
=
"请输入您要搜索的内容..."
>
<button
type
=
"submit"
></button>
</form>
</div>
<div
class
=
"search bar8"
>
<form>
<input
type
=
"text"
placeholder
=
"请输入您要搜索的内容..."
>
<button
type
=
"submit"
></button>
</form>
</div>
</div>
</body>
</html>
作者：
链接：https://www.imooc.com/article/17055?block_id=tuijian_wz
来源：慕课网
作者：
链接：https://www.imooc.com/article/17055?block_id=tuijian_wz
来源：慕课网