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

Để 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);}

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