Thực hành CSS với một Form Tìm kiếm

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Trong hướng dẫn này, chúng ta sẽ khám phá cách trang trí một form tìm kiếm đơn giản. Chúng ta sẽ không làm bất cứ điều gì cao siêu cả, thay vào đó khám phá bốn cách khác nhau để có thể trang trí một hộp tìm kiếm với sự trợ giúp của CSS Transitions.

Bạn đã có một Hộp tìm kiếm Cơ bản

Để bắt đầu, trong tập tin HTML, bạn sẽ cần phải tạo một input tìm kiếm. Nếu bạn xem qua đoạn code ở bên dưới, bạn sẽ thấy bốn thứ khác nhau: một div .box, một div .container-1, một .icon và bản thân input tìm kiếm.

<div class="box">
  <div class="container-1">
      <span class="icon"><i class="fa fa-search"></i></span>
      <input type="search" id="search" placeholder="Search..." />
  </div>
</div>

Tất cả bốn ví dụ sẽ có một hộp tìm kiếm — tất nhiên rồi — cũng như một lớp cho biểu tượng tìm kiếm. Mỗi ví dụ sẽ được đặt trong một container (phần tử kho chứa) để chúng ta có thể xử lý input tìm kiếm một cách độc lập. Cuối cùng, hộp div chịu trách nhiệm cố định container ở giữa.

Thêm Font Awesome

Font Awesome là một thư viện chứa các biểu tượng. Bạn có thể tìm hiểu thêm về dự án trên trang web của Font Awesome.

1	<i class="fa fa-search"></i>

Đoạn code ở trên là một ví dụ về cách bạn có thể include (bao gồm) biểu tượng bên trong markup của bạn. Tuy nhiên, để biểu tượng được hiển thị, bạn cũng cần phải bao gồm một liên kết đến thư viện Font Awesome, như minh hoạ như dưới đây. Hãy bao gồm liên kết này trong phần head của tài liệu.

1	<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

Phong cách Cơ bản

Bây giờ, chúng ta sẽ thêm một số phong cách trong một stylesheet riêng (bạn cũng cần đến nó để liên kết đến từ bên trong phần head của tài liệu).

body{
  background: #343d46;
}

.box{
  margin: 100px auto;
  width: 300px;
  height: 50px;
}

Trong đoạn code CSS ở trên chúng ta thêm một số phong cách cơ bản vào trang. Kiểu dáng của các hộp tìm kiếm sẽ có màu xanh đậm vì vậy nền của body không nên có màu trắng hoàn toàn. Lớp box cũng được canh giữa trên trang minh hoạ của hướng dẫn.

Trang trí Hộp Tìm kiếm

Hướng dẫn này xoay quanh việc học cách trang trí các hộp tìm kiếm. Trong ví dụ đầu tiên này, tôi sẽ giải thích chi tiết hơn điều gì đang xảy ra; tôi muốn chắc chắn rằng bạn biết chính xác những gì đang xảy ra. Trong ba ví dụ còn lại, tôi đơn giản là chỉ cho bạn cách để đạt được các hiệu ứng chuyển tiếp khác nhau.

#1. Nền Mờ dần

Ví dụ đầu tiên chúng ta sẽ giải quyết là thay đổi nền của input tìm kiếm khi hover (di chuyển chuột bên trên). Chúng ta cũng sẽ thêm một hiệu ứng chuyển tiếp để cho việc thay đổi không quá đột ngột.

HTML

Bạn đã thấy code HTML cho markup cơ bản. Đoạn code này sẽ tương tự cho tất cả các ví dụ.

<div class="box">
  <div class="container-1">
      <span class="icon"><i class="fa fa-search"></i></span>
      <input type="search" id="search" placeholder="Search..." />
  </div>
</div>

CSS

Để bắt đầu trang trí, chúng ta cần phải định nghĩa phong cách CSS của hộp tìm kiếm. Hãy thêm tất cả các thuộc tính CSS khác nhau từng cái một để bạn có thể biết chính xác những gì đang xảy ra.

.container-1{
  width: 300px;
  vertical-align: middle;
  white-space: nowrap;
  position: relative;
}

Trước tiên, chúng ta muốn trang trí lớp container. Thuộc tính được xem là quan trọng nhất là: position: relative. Điều này được thiết lập một cách đặc biệt để biểu tượng có thể được đặt ở bên trên input như bạn sẽ thấy sau đây.

.container-1 input#search{
  width: 300px;
  height: 50px;
  background: #2b303b;
  border: none;
  font-size: 10pt;
  float: left;
  color: #63717f;
  padding-left: 45px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

Input

Tiếp theo chúng ta cần trang trí input thật sự. Tất cả mọi thứ ở trên đẹp một cách tự nhiên vì border radius hoặc màu nền không ảnh hưởng cách input hoạt động. Hãy lưu ý đến thuộc tính padding-left. Nó ở đó để tạo khoảng trắng cho biểu tượng để nó không đè lên chữ bên trong input.

Dưới đây chúng ta có bốn thuộc tính khác nhau tô màu cho văn bản giữ chỗ (hay còn gọi là placeholder), trong ví dụ của chúng ta là Search. Thật không may là các thuộc tính cần phải được tách biệt cho các tiền tố nhà cung cấp (vendor prefix) và không thể được hợp nhất thành một thuộc tính viết tắt. Có một chút phiền toái và bạn sẽ thấy điều này lặp đi lặp lại trong mỗi ví dụ!

.container-1 input#search::-webkit-input-placeholder {
   color: #65737e;
}

.container-1 input#search:-moz-placeholder { /* Firefox 18- */
   color: #65737e;  
}

.container-1 input#search::-moz-placeholder {  /* Firefox 19+ */
   color: #65737e;  
}

.container-1 input#search:-ms-input-placeholder {  
   color: #65737e;  
}

Biểu tượng

Cuối cùng, chúng ta sẽ trang trí cho biểu tượng. Quan trọng nhất, chúng ta đang thiết lập vị trí của nó để được đặt bên trên input bằng cách thiết lập position: absolute. Margin giúp xác định vị trí của biểu tượng bên cạnh việc thiết lập top là 50%.

.container-1 .icon{
  position: absolute;
  top: 50%;
  margin-left: 17px;
  margin-top: 17px;
  z-index: 1;
  color: #4f5b66;
}

Thêm Hiệu ứng khi Hover

Bộ thuộc tính tiếp theo mà chúng ta phải tạo là những gì xảy ra với hộp tìm kiếm khi hover. Trong ví dụ này chúng ta chỉ muốn thay đổi màu nền. Để loại bỏ viền nổi màu vàng hoặc xanh xung quanh input (đôi khi trình duyệt thêm vào) thiết lập outline: none.

1	.container-1 input#search:hover, .container-1 input#search:focus, .container-1 input#search:active{
2	outline:none;
3	background: #ffffff;
4	}

Như bạn thấy trong đoạn code ở trên, chúng ta đã thêm hai trạng thái - focus và active. Bằng cách này thì hiệu ứng không biến mất khi bạn dừng hover lên trên input. Quan trọng hơn, hiệu ứng cũng nổi bật khi input đang được sử dụng.

Tạo Hiệu ứng Chuyển tiếp

Để làm cho hiệu ứng chuyển tiếp xảy ra, chúng ta cần thêm một vài dòng code. Quay trở lại tất cả các thuộc tính nơi chúng ta định nghĩa phong cách của input - .container-1 input#search. Trước dấu ngoặc đóng thêm đoạn code sau đây:

  -webkit-transition: background .55s ease;
  -moz-transition: background .55s ease;
  -ms-transition: background .55s ease;
  -o-transition: background .55s ease;
  transition: background .55s ease;

Chúng ta đang sử dụng cách viết tắt thuộc tính transition, nhưng thay vào đó chúng ta có thể xác định ba tham số riêng. Đầu tiên, chúng ta đang nói rằng hiệu ứng chuyển tiếp chỉ nên có tác dụng đối với thuộc tính background. Tiếp theo, chúng ta đang nói rằng hiệu ứng chuyển tiếp sẽ cần hơn phân nửa giây. Cuối cùng, chúng ta định nghĩa hiệu ứng chuyển tiếp sẽ là ease. ease không phải là hiệu ứng duy nhất có thể hoạt động ở đây, ví dụ chúng ta còn có thể sử dụng linear hoặc ease-in. Nó chỉ trông hơi khác nhau một chút. Hãy tự mình thử cái nào mà bạn thích.

Phong cách cho input giờ đây giống như code bên dưới.

.container-1 input#search{
  width: 300px;
  height: 50px;
  background: #2b303b;
  border: none;
  font-size: 10pt;
  float: left;
  color: #262626;
  padding-left: 45px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;

  
    -webkit-transition: background .55s ease;
  -moz-transition: background .55s ease;
  -ms-transition: background .55s ease;
  -o-transition: background .55s ease;
  transition: background .55s ease;
}

CSS Transitions Hoạt động Như thế nào?

Nếu bạn không biết tí gì về CSS Transitions, hãy để tôi mô tả vắn tắt cho bạn. Thứ nhất, để hiệu ứng chuyển tiếp hoạt động, thuộc tính cần được định nghĩa trên trạng thái mặc định chứ không phải trên trạng thái hover, hoặc active hoặc focus.

CSS Transitions cho phép chuyển đổi dần hiệu ứng và bạn có thể định nghĩa các tham số cụ thể để kiểm soát, chẳng hạn như thuộc tính sẽ được tạo hiệu ứng, thời gian chuyển tiếp và kiểu chuyển tiếp. Bạn có thể có nhiều hiệu ứng chuyển tiếp được thiết lập cho một phần tử. Nhưng, quan trọng hơn hết là bạn nên luôn luôn bao gồm các tiền tố nhà cung cấp (vendor prefix) để tương thích với các trình duyệt khác nhau, vì sự hỗ trợ cho thuộc tính này vẫn chưa phổ biến.

Để tìm hiểu thêm hãy xem bài viết: CSS3 Transitions và Transforms Từ đầu

#2. Mở rộng Input Khi Hover

Trong ví dụ này, ô tìm kiếm sẽ bắt đầu dưới dạng một biểu tượng chiếc kính lúp. Khi bạn di chuột lên biểu tượng, ô tìm kiếm sẽ mở rộng, sau đó bạn có thể nhập vào truy vấn của mình. Phần lớn code trong ví dụ này sẽ rất giống với ví dụ trước đó.

HTML

<div class="box">
  <div class="container-2">
      <span class="icon"><i class="fa fa-search"></i></span>
      <input type="search" id="search" placeholder="Search..." />
  </div>
</div>

CSS

.container-2{
  width: 300px;
  vertical-align: middle;
  white-space: nowrap;
  position: relative;
}

Phong cách input đối với hiệu ứng chuyển tiếp này thì khác. Input nhỏ hơn đáng kể nhờ đó biểu tượng có thể xuất hiện đằng sau một cái hình vuông. Tất cả các thuộc tính còn lại, như màu nền hoặc màu chữ, đều giống vì chúng ta không muốn thay đổi hoàn toàn kiểu dáng hộp tìm kiếm.

.container-2 input#search{
  width: 50px;
  height: 50px;
  background: #2b303b;
  border: none;
  font-size: 10pt;
  float: left;
  color: #262626;
  padding-left: 35px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  color: #fff;

  -webkit-transition: width .55s ease;
  -moz-transition: width .55s ease;
  -ms-transition: width .55s ease;
  -o-transition: width .55s ease;
  transition: width .55s ease;
}

Như bạn cũng có thể thấy tôi đã định nghĩa lại thuộc tính transition để chỉ có tác dụng đối với chiều rộng. Tôi giữ nguyên thời gian bởi vì nó đủ nhanh để không làm phiền người dùng, nhưng vẫn đủ lâu để tạo ra một hiệu ứng đẹp.

Dưới đây là đoạn code để áp dụng lại màu cho văn bản giữ chỗ.

.container-2 input#search::-webkit-input-placeholder {
   color: #65737e;
}

.container-2 input#search:-moz-placeholder { /* Firefox 18- */
   color: #65737e;  
}

.container-2 input#search::-moz-placeholder {  /* Firefox 19+ */
   color: #65737e;  
}

.container-2 input#search:-ms-input-placeholder {  
   color: #65737e;  
}

Và một lần nữa chúng ta trang trí biểu tượng bằng CSS. Nó nên giống với trong ví dụ trước.

.container-2 .icon{
  position: absolute;
  top: 50%;
  margin-left: 17px;
  margin-top: 17px;
  z-index: 1;
  color: #4f5b66;
}

Thêm Hiệu ứng Hover

Điều cuối cùng chúng ta cần làm là xác định hộp tìm kiếm sẽ trông giống như thế nào khi nó được hover. Trong đoạn code dưới đây, thuộc tính đầu tiên đảm bảo rằng form không có hiệu ứng phát sáng của trình duyệt và khi bạn đang sử dụng input — khi đang gõ vào nó — hộp tìm kiếm vẫn được mở rộng. Thuộc tính ở giữa chỉ mở rộng input để có chiều rộng đầy đủ khi hover.

.container-2 input#search:focus, .container-2 input#search:active{
  outline:none;
  width: 300px;
}

.container-2:hover input#search{
width: 300px;
}

.container-2:hover .icon{
  color: #93a2ad;
}

Điều cuối cùng xảy ra trong code ở trên là khi hover thì biểu tượng sẽ thay đổi màu sắc của nó. Đây chỉ là một chi tiết nhỏ để nhanh chóng hiển thị cho người dùng biết hộp tìm kiếm đang hoạt động, chứ không phải là một input tĩnh. Sự thay đổi không được cài đặt bằng một hiệu ứng chuyển tiếp.

#3. Tăng Kích thước Biểu tượng khi Hover

Trong tất cả bốn ví dụ, thì ví dụ này là tinh tế nhất, cả về code và hiệu ứng trực quan. Trong trường hợp này, biểu tượng kính lúp sẽ bật lên một chút và tăng kích thước.

HTML

Một lần nữa markup HTML của biểu tượng và hộp tìm kiếm giống như trong hai ví dụ trước đó. Ngoại trừ, tất nhiên là .container-3.

<div class="box">
  <div class="container-3">
      <span class="icon"><i class="fa fa-search"></i></span>
      <input type="search" id="search" placeholder="Search..." />
  </div>
</div>

CSS

CSS cho ví dụ này không có gì đặc biệt. Phần lớn nó bắt đầu rất giống với các ví dụ đầu tiên, nơi trạng thái mặc định không có gì khác nhau cả. Bên dưới là code cho container và input. Lưu ý rằng không có hiệu ứng chuyển tiếp trên input trong lúc này.

.container-3{
  width: 300px;
  vertical-align: middle;
  white-space: nowrap;
  position: relative;
}

.container-3 input#search{
  width: 300px;
  height: 50px;
  background: #2b303b;
  border: none;
  font-size: 10pt;
  float: left;
  color: #262626;
  padding-left: 45px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  color: #fff;
}

Một lần nữa, chúng ta có các thuộc tính giữ chỗ.

.container-3 input#search::-webkit-input-placeholder {
   color: #65737e;
}

.container-3 input#search:-moz-placeholder { /* Firefox 18- */
   color: #65737e;  
}

.container-3 input#search::-moz-placeholder {  /* Firefox 19+ */
   color: #65737e;  
}

.container-3 input#search:-ms-input-placeholder {  
   color: #65737e;  
}

Bây giờ, hãy nhìn vào nó, ta sẽ thấy biểu tượng cho ví dụ này cũng tương tự. Nó giống về màu sắc, vị trí và vân vân. Tuy nhiên, tôi đã thêm hiệu ứng chuyển tiếp vào nó. Những hiệu ứng chuyển tiếp này áp dụng trên tất cả các thuộc tính, nó là một cách viết ngắn gọn hơn thay vì phải viết ra từng thuộc tính riêng.

.container-3 .icon{
  position: absolute;
  top: 50%;
  margin-left: 17px;
  margin-top: 17px;
  z-index: 1;
  color: #4f5b66;

   -webkit-transition: all .55s ease;
  -moz-transition: all .55s ease;
  -ms-transition: all .55s ease;
  -o-transition: all .55s ease;
  transition: all .55s ease;
}

Thêm các Hiệu ứng Hover

.container-3 input#search:focus, .container-3 input#search:active{
    outline:none; 
}

.container-3:hover .icon{
  margin-top: 16px;
  color: #93a2ad;

  -webkit-transform:scale(1.5); /* Safari and Chrome */
  -moz-transform:scale(1.5); /* Firefox */
  -ms-transform:scale(1.5); /* IE 9 */
  -o-transform:scale(1.5); /* Opera */
   transform:scale(1.5);
  }

Có một vài điều xảy ra trong đoạn code trên. Thứ nhất, chúng ta đang thay đổi màu sắc của biểu tượng khi hover và di chuyển nó cao hơn một chút để nó canh giữa theo chiều dọc khi nó lớn hơn. Thứ hai, chúng ta thêm một sự biến đổi vào biểu tượng khi hover để nó lớn hơn 1,5 lần so với kích thước ban đầu của nó. Bởi vì hiệu ứng chuyển tiếp được định nghĩa tác động đến tất cả các thuộc tính, do đó nó xuất hiện nếu biểu tượng này lớn lên khi hover.

Một lần nữa, hãy xem qua Hiệu ứng Chuyển Tiếp và Biến đổi trong CSS3 để tìm hiểu thêm về thuộc tính biến đổi.

#4. Khi Hover Button

Không giống như ba ví dụ trước, ví dụ này sẽ phức tạp hơn. Khi hover, một button sẽ trượt lên phía trên input để cho phép bạn tiếp tục — giống như Send hoặc Go. Button sẽ có biểu tượng kính lúp bên trong nó.

HTML

<div class="box">
  <div class="container-4">
    <input type="search" id="search" placeholder="Search..." />
    <button class="icon"><i class="fa fa-search"></i></button>
  </div>
</div>

Ở đây HTML có một chút khác biệt. Tất nhiên input vẫn còn ở đó, nhưng biểu tượng bây giờ nằm bên trong một phần tử button xuất hiện phía sau input. Điều quan trọng là button ở phía sau input vì nó liên quan đến cách hiệu ứng hover sẽ được tạo ra trong CSS.

CSS

CSS trong ví dụ này thì khác, vì vậy hãy chú ý! Dưới đây là đoạn code để trang trí cho container. Thứ nhất, position: relative biến mất, nó không còn quan trọng vì biểu tượng không còn dựa vào nó để được đặt bên trên input. Tuy nhiên, chúng ta có overflow:hidden. Điều này sẽ giúp button khỏi hiển thị khi nó không được hover. Về mặt kỹ thuật, button xuất hiện ở bên phải input, nhưng nhờ vào overflow:hidden nó không hiển thị khi nó rơi ra ngoài chiều rộng của container — container và input có cùng chiều rộng.

.container-4{
  overflow: hidden;
  width: 300px;
  vertical-align: middle;
  white-space: nowrap;
}

Bên dưới input không có hiệu ứng chuyển tiếp vì nó không phải là phần tử được áp dụng hiệu ứng.

.container-4 input#search{
  width: 300px;
  height: 50px;
  background: #2b303b;
  border: none;
  font-size: 10pt;
  float: left;
  color: #fff;
  padding-left: 15px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

Tiếp theo là đoạn code để áp dụng lại màu cho các placeholder.

.container-4 input#search::-webkit-input-placeholder {
   color: #65737e;
}

.container-4 input#search:-moz-placeholder { /* Firefox 18- */
   color: #65737e;  
}

.container-4 input#search::-moz-placeholder {  /* Firefox 19+ */
   color: #65737e;  
}

.container-4 input#search:-ms-input-placeholder {  
   color: #65737e;  
}

Dưới đây là đoạn code để trang trí button xuất hiện khi hover. Mánh khoé để làm cho nó trượt từ cạnh bên vào là đặt nó ngay sau input, và ẩn nó trừ khi hover. Button là phần tử thay đổi — nó di chuyển — do đó nó là phần tử nơi mà hiệu ứng chuyển tiếp được định nghĩa. Để đơn giản hơn, tôi đã định nghĩa hiệu ứng chuyển tiếp để áp dụng lên tất cả các thuộc tính.

.container-4 button.icon{
  -webkit-border-top-right-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  -moz-border-radius-topright: 5px;
  -moz-border-radius-bottomright: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;

  border: none;
  background: #232833;
  height: 50px;
  width: 50px;
  color: #4f5b66;
  opacity: 0;
  font-size: 10pt;

  -webkit-transition: all .55s ease;
  -moz-transition: all .55s ease;
  -ms-transition: all .55s ease;
  -o-transition: all .55s ease;
  transition: all .55s ease;
}

Thêm Hiệu ứng Hover

Để button hiện dần, nó cần được di chuyển lên trên input. Điều đó được thực hiện thông qua margin âm. Trước đó, chúng ta đã thiết lập độ trong suốt (opacity) của button là 0 vì vậy chúng ta phải đặt lại nó thành 1 để button có thể hiện ra.

Thuộc tính cuối cùng chỉ thay đổi nền của button nếu bạn hover lên button. Thật tốt khi cho phép người dùng biết rằng button đang hoạt động và bạn có thể nhấp vào nó để submit thông tin tìm kiếm; không có gì thú vị khi có một button không hoạt động.

.container-4:hover button.icon, .container-4:active button.icon, .container-4:focus button.icon{
    outline: none;
    opacity: 1;
    margin-left: -50px;
  }

  .container-4:hover button.icon:hover{
    background: white;
  }

Tóm tắt

Vâng, điều đó đưa chúng ta đến phần kết thúc của các thử nghiệm CSS của chúng ta! Chúng ta đã lấy một form tìm kiếm cơ bản và sử dụng một số hiệu ứng để thay đổi hành vi của nó. Bạn có đề xuất gì trong việc thay đổi một input tìm kiếm như thế này không? Những khía cạnh nào khác của nó mà bạn có thể áp dụng hiệu ứng chuyển tiếp hoặc biến đổi trong CSS? Hãy cho chúng tôi biết trong phần bình luận nhé!