RSSCSS

Tạo form tìm kiếm dạng Expandable Search

Hôm nay, mình sẽ giới thiệu với các bạn bài hướng dẫn nhanh tạo form tìm kiếm dạng Expandable Search. Đây là dạng tìm kiếm có hiệu ứng đẹp, tiết kiệm không gian trên web, chủ yếu sử dụng thuộc tính Transition CSS3 mà không cần đến javascript hay jQuery phức tạp.

HTML

Chúng ta sẽ bắt đầu với mã HTML đơn giản.

 
  	<form>
		<input type="search" placeholder="Tìm kiếm">
	</form>

CSS3

Reset Search Input

 
input {
	outline: none;}
	
input[type=search] {
	-webkit-appearance: textfield;
	-webkit-box-sizing: content-box;}

Đến phần định dạng phần input tìm kiếm

 
input[type=search] {
	background:#fff url(img.png) no-repeat right center;
	border: solid 1px #a3a3a3;
	padding: 10px 30px 10px 10px;
	margin-left:300px;
	width: 150px;}

Bo góc

 
input[type=search] {
    -webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;}

Hiệu ứng Transition

 
input[type=search] {
    -webkit-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	 -o-transition: all 0.5s linear;
	transition: all 0.5s linear;}

Cuối cùng khi rê chuột vào phần search

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


Tạo form tìm kiếm dạng Expandable Search

Nguồn: Y2Graphic

 

 

Tags:

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