Cách tạo: hộp tìm kiếm động

Học cách sử dụng CSS để tạo biểu mẫu tìm kiếm động.

Nhấn vào trường nhập liệu:

Cách tạo hộp tìm kiếm động

Bước 1 - Thêm HTML:

<input type="text" name="search" placeholder="Tìm kiếm..">

Bước 2 - Thêm CSS:

input[type=text] {
  width: 130px;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}
/* Khi trường nhập được tập trung, thay đổi độ rộng thành 100% */
input[type=text]:focus {
  width: 100%;
}

Thử ngay

Trang liên quan

Hướng dẫn:HTML biểu mẫu

Hướng dẫn:CSS biểu mẫu