thực hành - tạo animated search form

Trong bài thực hành này, chúng ta sẽ tìm hiểu cách tạo một form search hoạt ảnh bằng CSS.

Animated search form

Click vào trường input bên dưới để xem hiệu ứng animated

Cách tạo animated search form

Bước 1) Thêm HTML:

Ví dụ

<div class="containerx">
    <input type="text" id="text" name="search" placeholder="Search..." />
</div>

Bước 2) Thêm CSS:

Ví dụ

/* Tạo kiểu cho vùng chứa */
.containerx {
    padding:10px 20px;
    background-color:#ddd;
    border-radius:5px;    
}
/* Tạo kiểu cho phần tử input */
.containerx > input {
    border:none;
    background-image:url("/images/searchicon.png");
    background-repeat:no-repeat;
    background-position:10px 10px;
    padding:12px 35px;
    width:130px;
    border-radius:5px;    
    transition:width 1s ease-in-out;
    box-shadow:0px 0px 2px 1px orange;
}
/* Thêm hiệu ứng khi được lấy nét */
.containerx > input:focus {
    width:100%;
    outline:none;
    box-shadow:0px 0px 2px 1px orange;    
}