Hãy tìm kiếm trước khi đặt câu hỏi, bạn sẽ tiết kiệm rất nhiều thời gian

Nhưng đừng ngại hỏi và đóng góp câu trả lời

Tạo search box bằng CSS

0 phiếu
level-1 đã hỏi 24 Tháng 4, 2015 bởi Khách
đã tag lại 24 Tháng 4, 2015
Làm thế nào để tạo form search nhỏ trên menu nhưng khi click vào nó sẽ mở rộng form search?
Hỏi bạn bè:

1 câu trả lời

0 phiếu
level-11 level-power đã trả lời 24 Tháng 4, 2015 bởi tamnt Chuyên gia (20,400 điểm)

Bạn có thể sử dụng CSS transition để thay đổi độ rộng của hộp tìm kiếm. Ở đây mình có HTML với CSS để tạo search form giống của Github.

Code HTML:

  1. <div class="search_form">
  2. <form action="" method="post">
  3. <input type="text" name="search_box" id="search_box" placeholder="Search or type command" />
  4. </form>
  5. </div>

Code này sẽ tạo 1 form đơn giản, chỉ có 1 textbox bên trong và không có nút tìm kiếm (chỉ cần nhập text vào form sau đó enter).

Code CSS:

  1. .search_form input[type=text]
  2. {
  3.     border: 1px solid #ccc;
  4.     border-radius: 3px;
  5.     box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  6.     width:200px;
  7.     min-height: 28px;
  8.     padding: 4px 20px 4px 8px;
  9.     font-size: 12px;
  10.     -moz-transition: all .2s linear;
  11.     -webkit-transition: all .2s linear;
  12.     transition: all .2s linear;
  13. }
  14. .search_form input[type=text]:focus
  15. {
  16.     width: 400px;
  17.     border-color: #51a7e8;
  18.     box-shadow: inset 0 1px 2px rgba(0,0,0,0.1),0 0 5px rgba(81,167,232,0.5);
  19.     outline: none;
  20. }

Chuyên mục HOT

...