RSSCSS

Tạo khung tìm kiếm co giãn – Expandable Search Form CSS3

Khung tìm kiếm là một trong những thứ quan trọng cho website, blog. Để tăng thêm phần thu hút cho tính năng tìm kiếm này mình muốn giới thiệu với các bạn cách tạo khung tìm kiếm co giãn hay Expandable Search Form bằng cách sử dụng CSS3, không cần đến JavaScript và jQuery.

Khung tìm kiếm là một trong những thứ quan trọng cho website, blog. Để tăng thêm phần thu hút cho tính năng tìm kiếm này mình muốn giới thiệu với các bạn cách tạo khung tìm kiếm co giãn hay Expandable Search Form bằng cách sử dụng CSS3, không cần đến JavaScript và jQuery.

Nói vu vơ vài câu ngoài lề tí, dạo này cũng rất bận nên không có vào chăm sóc blog mình được, các bạn gửi mail thì chưa trả lời được cũng rất làm tiếc những vì chén cơm manh áo không thể không làm như thế :D . Mình sẽ tranh thủ nếu rãnh rỗi lúc nào thì vào viết bài lúc đó. Mong ràng sẽ giữ được liên lạc với các bạn Blogger chúng ta.

Expandable Search Form là gì?

Expandable Search Form cũng giống như form search bình thường chỉ có một sự khác biệt đó là nó có thể thay đổi kích thước được khi mình đưa con trỏ chuột vào và ra khỏi form rearch này. Một ví dụ đó là khi bạn vừa cài WordPress lên xong sẽ thấy được trên theme mặc định của WordPress có khung tìm kiếm dạng Expandable này.

Tim kiem  Expandable CSS3

Trong bài này mình sẽ giới thiệu cho các bạn hai kiểu của Expandable Search thật ra chỉ là thay đổi kích thước hiển thị cho nó phù hợp với giao diện website, blog của chúng ta mà thôi. Đó là hai mẫu Expandable Search đề nghị. Demo Expandable Search Form | Download Source

Xây dựng Expandable Search

Đầu tiên khai báo form search trong đó có một input để nhập từ khóa, chú ý các thuộc tính của search đó là: type=”search” và placeholder=”Search”.

<!--
<h3>Demo A</h3>
<form>
	<input placeholder="Search" type="search">
</form>

<h3>Demo B</h3>
<form id="demo-b">
	<input placeholder="Search" type="search">
</form>
-->

Sau đó bạn tạo CSS cho khung tìm kiếm của mình với cấu trúc như sau: Phần đầu là reset lại các định dạng mặc định của webkit search input.

<!--
/* reset webkit search input browser style */
input {
	outline: none;
}
input[type=search] {
	-webkit-appearance: textfield;
	-webkit-box-sizing: content-box;
	font-family: inherit;
	font-size: 100%;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
	display: none; /* remove the search and cancel icon */
}
-->

Định dạng type=search, bao gồm các thuộc tính background, border, width …

<!--
/* search input field */
input[type=search] {
	background: #ededed url(search-icon.png) no-repeat 9px center;
	border: solid 1px #ccc;
	padding: 9px 10px 9px 32px;
	width: 55px;
	
	-webkit-border-radius: 10em;
	-moz-border-radius: 10em;
	border-radius: 10em;
	
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	transition: all .5s;
}
-->

Các thuộc tính khi giơ chuột vào trong khung search.

<!--
input[type=search]:focus {
	width: 130px;
	background-color: #fff;
	border-color: #6dcff6;
	
	-webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
	-moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
	box-shadow: 0 0 5px rgba(109,207,246,.5);
}
-->

ĐỊnh dạng màu sắc chữ trước khi gõ chữ và sau khi gõ chữ vào trong khung search.

<!--
/* placeholder */
input:-moz-placeholder {
	color: #999;
}
input::-webkit-input-placeholder {
	color: #999;
}
-->
Demo Expandable Search Form A

Demo Expandable Search Form A

Tương tự để tạo ra được dạng demo như ở phần Demo B bạn có cấu trúc CSS như sau:

<!--
/* demo B */
#demo-b input[type=search] {
	width: 15px;
	padding-left: 10px;
	color: transparent;
	cursor: pointer;
}
#demo-b input[type=search]:hover {
	background-color: #fff;
}
#demo-b input[type=search]:focus {
	width: 130px;
	padding-left: 32px;
	color: #000;
	background-color: #fff;
	cursor: auto;
}
#demo-b input:-moz-placeholder {
	color: transparent;
}
#demo-b input::-webkit-input-placeholder {
	color: transparent;
}
-->
Demo Search B

Demo Search B

Kết luận: Vậy coi như mình đã tạo được một search from hay, không cần dùng đến JavaScript và jQuery mà vẫn có chuyển động mượt mà. Tuy nhiên có một số lưu ý cho bạn, Expandable Search Form chỉ chạy tốt trên Chrome, Firefox, Safari, và IE8+ các phiên bản IE dưới không hỗ trợ cho lại CSS này. Chúc các bác thành công!

Tham khảo: http://webdesignerwall.com/tutorials/expandable-mobile-search-form

VN:F [1.9.22_1171]
Nếu bạn thấy bài viết hữu ích, hãy nhấn +1 và các liên kết chia sẻ để website ngày càng phát triển hơn. Xin cám ơn bạn!

Nếu là khách, bạn phải đăng ký tài khoản và kích hoạt tài khoản để bình luận được hiển thị ở đây.
Thông tin kích hoạt gửi đến mail của bạn.

Tin mới hơn

Tin cũ hơn

Lên trên đầu