The Search (engine) box is the input text box which input the some words from user and by the help of that words generate some results or search to the whole website for matching results. Every webpage has their own search engine. However, there other world class search engine who provide custom webpage search engine package like Google.
To perform animated search box, you will need to create a html/php (web page), CSS code and a search logo.
Search Icon<!DOCTYPE html>
<html>
<head>
<style type="text/css">
input[type=text] { /* #search { */
width: 30%;
box-sizing: border-box;
border: 2px solid lime;
border-radius: 4px;
font-size: 15px;
background-color: black;
color: yellow;
background-image: url('ls-mini-icon20.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.6s ease-in-out;
transition: width 0.6s ease-in-out;
}
input[type=text]:focus { /* #search:focus { */
width: 100%;
color: lime;
}
</style>
</head>
<body>
<p>Animated search Box Example:</p>
<form method="post">
<input type="text" id="search" name="search" placeholder="Search..">
</form>
</body>
</html>
Output of the following example:
Note: you can change CSS as your requirements.
No comments:
Post a Comment