本章节我们将学习如何使用 CSS 创建搜索框。
图标资源用的是 Font Awesome4.7 版本的图标。
Font Awesome 图标教程可以参考：
Font Awesome 图标
可以直接引入第三方 CDN 库：
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
基础 HTML 代码
搜索表单 HTML 代码
<!-- 搜索表单 -->
<
form
class
=
"example"
action
=
"action_page.php"
>
<
input
type
=
"text"
placeholder
=
"搜索.."
name
=
"search"
>
<
button
type
=
"submit"
><
i
class
=
"fa fa-search"
><
/
i
><
/
button
>
<
/
form
>
搜索框 CSS 代码
实例
*
{
box-sizing:
border-box
;
form
.example
input
[
type
=
text
]
{
padding:
10
px
;
font-size:
17
px
;
border:
1
px
solid
grey
;
float:
left
;
width:
80
%
;
background:
#f1f1f1
;
form
.example
button
{
float:
left
;
width:
20
%
;
padding:
10
px
;
background:
#2196F3
;
color:
white
;
font-size:
17
px
;
border:
1
px
solid
grey
;
border-left:
none
;
cursor:
pointer
;
form
.example
button
:hover
{
background:
#0b7dda
;
form
.example
:
:after
{
content:
""
;
clear:
both
;
display:
table
;
}
尝试一下 »
第二个搜索框实例
实例
body
{
background:
#f2f2f2
;
font-family:
'
Open
Sans
',
sans-serif
;
.search
{
width:
100
%
;
position:
relative
;
display:
flex
;
.searchTerm
{
width:
100
%
;
border:
3
px
solid
#00B4CC
;
border-right:
none
;
padding:
5
px
;
height:
20
px
;
border-radius:
5
px
0
0
5
px
;
outline:
none
;
color:
#9DBFAF
;
.searchTerm
:focus
{
color:
#00B4CC
;
.searchButton
{
width:
40
px
;
height:
36
px
;
border:
1
px
solid
#00B4CC
;
background:
#00B4CC
;
text-align:
center
;
color:
#fff
;
border-radius:
0
5
px
5
px
0
;
cursor:
pointer
;
font-size:
20
px
;
.wrap
{
width:
30
%
;
position:
absolute
;
top:
50
%
;
left:
50
%
;
transform:
translate
(-
50
%
, -
50
%
)
;
}
尝试一下 »
