Để tạo một form tìm kiếm khi di chuột vào, nó sẽ mở rộng textbox tìm kiếm ra, chúng ta sử dụng HTML và CSS3 như sau:
HTML
<
form
>
<
input
type
=
"search"
placeholder
=
"Tìm kiếm"
>
</
form
>
CSS3
Reset Search Input
input {
outline
:
none
;}
input[type=search] {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;}
Đến phần định dạng phần input tìm kiếm
input[type=search] {
background
:
#fff
url
(img.png)
no-repeat
right
center
;
border
:
solid
1px
#a3a3a3
;
padding
:
10px
30px
10px
10px
;
margin-left
:
300px
;
width
:
150px
;}
Bo góc
input[type=search] {
-webkit-border-radius:
20px
;
-moz-border-radius:
20px
;
border-radius:
20px
;}
Hiệu ứng Transition
input[type=search] {
-webkit-transition:
all
0.5
s linear;
-moz-transition:
all
0.5
s linear;
-o-transition:
all
0.5
s linear;
transition:
all
0.5
s linear;}
Cuối cùng khi rê chuột vào phần search
input[type=search]:focus {
width
:
250px
;
background-color
:
#fff
;
border-color
:
#6dcff6
;
-webkit-box-shadow:
0
0
5px
rgba(
109
,
207
,
246
,
0.5
);
-moz-box-shadow:
0
0
5px
rgba(
109
,
207
,
246
,
0.5
);
box-shadow:
0
0
5px
rgba(
109
,
207
,
246
,
0.5
);}
Chúc các bạn thành công!
0 nhận xét:
Đăng nhận xét