Thứ Năm, 28 tháng 2, 2013

Để 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.5s linear;

-moz-transition: all 0.5s linear;

-o-transition: all 0.5s linear;

transition: all 0.5s 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);}

Tạo form tìm kiếm dạng Expandable Search

Chúc các bạn thành công!

0 nhận xét:

Đăng nhận xét

Categories

Sample Text

Được tạo bởi Blogger.

Must Read

Biểu mẫu liên hệ

Tên

Email *

Thông báo *

Popular Posts

Video

Popular Posts

Our Facebook Page