This tip is show you how to making a search box using CSS3, Jquery and SVG. It will make your website more interesting.
How to make it:
1. Create a SVG search icon.
2. Create a search input.
4. The core CSS/CSS3 styles.
svg {
position: absolute;
transform: translateX(-246px);
width: 600px;
height: auto;
stroke-width: 8px;
stroke: #b3c33a;
stroke-width: 1px;
stroke-dashoffset: 0;
stroke-dasharray: 64.6 206.305;
transition: all 0.5s ease-in-out;
}
.input-search {
position: absolute;
width: calc(100% - 148px);
height: 64px;
top: 0;
right: 20px;
bottom: 0;
left: 0;
border: none;
background-color: transparent;
outline: none;
padding: 20px;
font-size: 50px;
}
.search-label {
position: absolute;
display: block;
width: 108px;
height: 108px;
top: 0;
left: 50%;
margin-left: -54px;
z-index: 100;
transition: 0.5s ease-in-out;
}
.isActive .search-label { transform: translateX(246px); }
.isActive svg {
stroke-dashoffset: -65;
stroke-dasharray: 141.305 65;
transform: translateX(0);
}
.isActive.full svg {
stroke-dashoffset: -65;
stroke-dasharray: 141.305 65;
transform: translateX(0);
}
.full .search-label { transform: translateX(246px); }
.full svg {
stroke-dashoffset: 0;
stroke-dasharray: 64.6 206.305;
transform: translateX(0);
}
.search {
position: absolute;
}
5. The jQuery script to enable the animated search field on focus.
var searchField = $('.search');
var searchInput = $("input[type='search']");
var checkSearch = function(){
var contents = searchInput.val();
if(contents.length !== 0){
searchField.addClass('full');
} else {
searchField.removeClass('full');
}
};
$("input[type='search']").focus(function(){
searchField.addClass('isActive');
}).blur(function(){
searchField.removeClass('isActive');
checkSearch();
});
Demo Download
